/* Page « Try FLOP Network in your browser » : compléments de css/easynode.css.
   Source : knowledge/design/easynode-design-system.md (relevé du 2026-10-27), cible « page autonome »
   (§ 8, § 9.3, § 10). Chaque règle cite sa section ; une valeur littérale vient de la section citée.
   Un composant que la charte ne décrit pas se compose avec ses jetons et la règle [R] la plus proche,
   nommée sur place. Aucune couleur, police, ombre ni rayon hors de la charte. */

/* Polices auto-hébergées (§ 3.1) : mêmes familles, graisses et sous-ensembles (latin, latin-ext) que la
   feuille css2 de Google Fonts du § 3.1, relue le 2026-10-28 ; servies par la page, rien de tiers. */
@font-face {
  font-family: "Tilt Warp";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tilt-warp/tilt-warp-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tilt Warp";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tilt-warp/tilt-warp-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inria Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inria-sans/inria-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base ------------------------------------------------------------------------------------------ */

/* Défilement doux des ancres, seulement sans demande de mouvement réduit (§ 6.7, § 8). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Les ancres s'arrêtent sous l'en-tête collant (§ 4.6). */
[id] { scroll-margin-top: calc(14 * var(--en-base)); }

html { color: var(--en-ink); background: var(--en-background); }
img { max-width: 100%; height: auto; }

/* Tilt Warp toujours en 400, sans synthèse (§ 3.2 [R]) : .en-tag et .en-cartoon du § 8 et les classes
   de cette feuille en Tilt Warp hériteraient sinon du 300 du corps. */
.en-tag, .en-cartoon, .kicker, .card-title, .live-list__value, .steps__title, .steps > li::before, .env-badge,
.tabs__tab, .badge-verified, .rewards__title, .rewards__flag, .easynode__tagline, .site-footer__built,
.identity-card__values dt, .field__label, .budgets dt, .site-nav__links a {
  font-weight: 400;
  font-synthesis: none;
}

/* Vague du § 8 : même géométrie (pleine largeur, calée en bas), posée par left: 0 au lieu de
   left: 50% et translate: -50%, qui laissait un liseré de 1 px à gauche sur une largeur impaire
   (mesuré à 375 px). */
.en-wave-bottom::before { left: 0; translate: none; }
p { margin: 0 0 calc(2 * var(--en-base)); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }

/* Liens du texte : violet souligné sur clair (8,22:1, § 2.5) ; blanc sur violet et sur sombre.
   Sélecteurs sous :where(), sans poids : un composant (navigation, bouton) garde sa propre couleur. */
:where(a) { color: var(--en-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:where(a:not(.en-btn):hover) { color: var(--en-ink); }
:where(.en-section--primary, .en-section--dark) :where(a:not(.en-btn)) { color: #FFFFFF; }
:where(.en-section--primary, .en-section--dark) :where(a:not(.en-btn):hover) { color: var(--en-secondary); }
:where(.en-section--primary, .en-section--dark) :where(.en-surface) :where(a:not(.en-btn)) { color: var(--en-primary); }
:where(.en-section--primary, .en-section--dark) :where(.en-surface) :where(a:not(.en-btn):hover) { color: var(--en-ink); }

/* Focus clavier visible partout (§ 6.4, proposition du § 8) ; jaune sur violet et sur sombre, où le
   violet ne se verrait pas (7,17:1 et 13,46:1, § 2.5). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: var(--en-border-width) solid var(--en-primary);
  outline-offset: 3px;
}
.en-section--primary :focus-visible, .en-section--dark :focus-visible { outline-color: var(--en-secondary); }
.en-section--primary .en-surface :focus-visible, .en-section--dark .en-surface :focus-visible { outline-color: var(--en-primary); }

/* Bouton désactivé (§ 4.2 : curseur not-allowed ; § 4.5 : fond #F6F6F6… ici la tranche claire du site,
   § 2.2, texte à 60 %) ; il ne s'enfonce pas. */
.en-btn:disabled { cursor: not-allowed; background-color: var(--en-light); color: color-mix(in srgb, var(--en-ink) 60%, transparent); }
@media (hover: hover) {
  .en-btn:disabled:hover {
    translate: none;
    box-shadow: 0 var(--en-depth) 0 calc(-1 * var(--en-border-width)) var(--en-edge), 0 var(--en-depth) 0 0 var(--en-ink);
  }
}
.en-btn { text-align: center; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : bouton blanc (§ 4.2), visible au focus seulement. */
.skip-link { position: absolute; left: var(--en-base); top: var(--en-base); z-index: 30; }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; }

/* Surtitre (§ 2.1, § 3.4 app : Tilt Warp capitales, violet ; jaune sur violet et sur sombre, § 2.5). */
.kicker {
  font-family: var(--en-font-title);
  font-size: var(--en-fs-small);
  text-transform: uppercase;
  color: var(--en-primary);
  margin: 0 0 var(--en-base);
}
.en-section--primary .kicker, .en-section--dark .kicker { color: var(--en-secondary); }

/* Titre de carte : taille « big » des titres d'argument (§ 3.3), Tilt Warp 400 (§ 3.2). */
.card-title {
  font-family: var(--en-font-title);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--en-fs-big);
  line-height: 1;
  margin: 0 0 calc(2 * var(--en-base));
}

/* Colonne de lecture (§ 5.2 : 877 px). */
.prose { max-width: var(--en-content); margin-bottom: calc(4 * var(--en-base)); }

/* Mention de source : 14 px gras, au-dessus du plancher de 12 px (§ 3.5). */
.source { font-size: 14px; font-weight: 700; }
p.source { margin-top: var(--en-base); }

/* Valeur (adresse, did, graine) : boîte du code du § 4.9 (fond sombre, texte blanc, rayon 6 px). */
.value {
  display: block;
  padding: var(--en-base) calc(1.5 * var(--en-base));
  background: var(--en-ink);
  color: #FFFFFF;
  border-radius: var(--en-radius);
  font-weight: 400;
  overflow-wrap: anywhere;
  min-height: calc(5 * var(--en-base));
}
.value--inline { display: inline-block; min-height: 0; padding: 2px var(--en-base); }

/* Encart d'avertissement : couleur d'état sur la bordure, texte en encre (§ 2.5 [R]). */
.notice {
  padding: var(--en-base) calc(1.5 * var(--en-base));
  background: var(--en-light);
  color: var(--en-ink);
  border: var(--en-border-width) solid var(--en-warning);
  border-radius: var(--en-radius);
  font-size: 14px;
  font-weight: 700;
}

.button-row { display: flex; flex-wrap: wrap; gap: calc(2 * var(--en-base)); align-items: center; }

/* 1. En-tête (§ 4.6) ------------------------------------------------------------------------------ */

.site-header { position: relative; z-index: 10; margin-top: calc(2 * var(--en-base)); }
@media (min-width: 768px) {
  .site-header { position: sticky; top: calc(2 * var(--en-base)); }
}
/* Carte blanche tracée avec ombre ; marge intérieure 0 32px 0 8px (§ 4.6). */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 calc(2 * var(--en-base));
  padding: 0 var(--en-base);
}
.site-nav__brand { display: inline-flex; align-items: center; gap: var(--en-base); }
.site-logo { display: block; line-height: 0; }
/* Logo en fichier fourni (§ 1.4), 56 px de haut comme le squelette du § 9.3 ; 48 px sous 768 px.
   Le fichier porte sa propre marge autour du pictogramme (zone de protection, § 1.4). */
.site-logo img { height: 48px; width: auto; }
.site-nav__preview { margin-left: var(--en-base); }
.site-nav__links {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0 0 var(--en-base);
}
/* Liens : Tilt Warp 16 px, capitales, suivis de « . » (§ 4.6, § 1.5), en 400 (§ 3.2 [R]). */
.site-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--en-control-height);
  padding: 0 calc(1.5 * var(--en-base));
  font-family: var(--en-font-title);
  font-size: var(--en-fs-small);
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--en-ink);
}
/* Survol : texte violet, comme les liens de sous-menu du site (§ 6.4). */
.site-nav__links a:hover { color: var(--en-primary); }
.site-nav__cta { margin-block: calc(2 * var(--en-base)) calc(2 * var(--en-base) + var(--en-depth)); }
@media (min-width: 768px) {
  .site-nav { padding: 0 calc(4 * var(--en-base)) 0 var(--en-base); }
  .site-logo img { height: 56px; }
  /* « Marketplace » de l'en-tête : 8px 32px, texte 20 px (§ 4.2). */
  .site-nav__cta { padding: var(--en-base) calc(4 * var(--en-base)); font-size: 20px; }
}
@media (min-width: 1024px) {
  .site-nav { flex-wrap: nowrap; }
  .site-nav__links { order: 0; flex-basis: auto; padding: 0; }
  /* Marge des liens du site : 40px 19.2px (§ 4.6). */
  .site-nav__links a { padding: calc(5 * var(--en-base)) 1.2em; }
}

/* 2. Hero : violet tramé à vague basse (§ 5.5, § 6.1, § 6.2, § 8) --------------------------------- */

.hero__grid { display: grid; gap: calc(6 * var(--en-base)); align-items: start; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
.hero h1 { color: #FFFFFF; }
/* Phrase d'accroche : Inria Sans, taille « medium » (§ 3.3). */
.hero__lead { font-size: var(--en-fs-medium); font-weight: 400; max-width: 36em; margin-bottom: calc(4 * var(--en-base)); }
/* Action principale unique de la zone, jaune (§ 4.2 [R]) ; trait sombre sur violet (§ 4.2). */
.hero__cta { font-size: var(--en-fs-medium); padding: var(--en-base) calc(4 * var(--en-base)); }
.hero__action { margin-bottom: calc(3 * var(--en-base)); }
.hero__noscript { font-weight: 700; }
/* Bandeau d'avertissement : étiquette d'environnement de l'app (« TESTNET ») : badge blanc, trait 3 px,
   sans ombre (§ 4.4) ; taille md du badge : 14 px, marge 2px 10px. */
.env-badge {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--en-font-title);
  font-size: 14px;
  text-transform: uppercase;
  color: var(--en-ink);
  background: var(--en-surface);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
}
.identity-card__empty { margin-bottom: calc(3 * var(--en-base)); }
.identity-card__values { margin: 0 0 calc(3 * var(--en-base)); }
/* Libellé : Tilt Warp 14 px (§ 4.5, app). */
.identity-card__values dt, .field__label, .budgets dt {
  font-family: var(--en-font-title);
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 4px;
}
.identity-card__values dd { margin: 0 0 calc(2 * var(--en-base)); }
.identity-card__next { margin-bottom: calc(3 * var(--en-base)); }
/* Indicateurs en direct : point de 8 px (§ 4.4, « liveIcon ») ; couleur d'état sur l'icône seulement
   (§ 2.5 [R]) ; halo animé sur un seul élément (§ 6.6 [R]). */
.live-list { list-style: none; padding: calc(2 * var(--en-base)) 0 0; border-top: var(--en-border-width) solid var(--en-light); }
.live-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--en-base); margin-bottom: var(--en-base); }
.live-list__label { font-weight: 700; font-size: 14px; }
.live-list__value { font-family: var(--en-font-title); font-size: var(--en-fs-small); margin-left: auto; }
/* Bouton de la tête du devnet, avant le premier geste du visiteur (delta 2b) : bouton blanc, le neutre
   du § 4.2 (un seul jaune par zone, § 4.2 [R] et § 10) ; texte à 14 px, la taille « md » des boutons et
   des badges de l'app (§ 4.2, § 4.4) ; hauteur de contrôle de 46 px gardée (§ 4.2). */
.live-list__show { margin-left: auto; font-size: 14px; }
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--en-ink); }
.live-dot[data-state="live"] { background: var(--en-success); }
.live-dot[data-state="down"] { background: var(--en-error); }
.live-dot--ping[data-state="live"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--en-success);
  animation: page-ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes page-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* 3. How it works : carte violette tramée aux étapes « cartoon », comme « EasyNode's Solution »
   (§ 5.5, point 4 ; § 4.9). --------------------------------------------------------------------- */

.how-card {
  --en-edge: var(--en-primary);
  position: relative;
  overflow: hidden;
  list-style: none;
  display: grid;
  gap: calc(4 * var(--en-base));
  background: var(--en-primary);
  color: #FFFFFF;
}
.how-card > * { position: relative; z-index: 1; }
@media (min-width: 1024px) { .how-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Chiffres « cartoon » jaunes, 72 px (§ 4.9), jaune sur violet (7,17:1, § 2.5). */
.how-step__num { display: block; font-size: var(--en-fs-huge); line-height: 1; margin-bottom: calc(2 * var(--en-base)); }
.how-step .card-title { color: #FFFFFF; }

/* 4. Try it now ----------------------------------------------------------------------------------- */

.try__grid { display: grid; gap: var(--en-gap); margin-bottom: calc(6 * var(--en-base)); align-items: start; }
@media (min-width: 1024px) { .try__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seed-panel { margin-bottom: calc(3 * var(--en-base)); }
.seed-panel .notice { margin-bottom: calc(2 * var(--en-base)); }
.check { display: flex; align-items: center; gap: var(--en-base); }
/* Cases et boutons radio natifs de 18 px, teintés violet (§ 4.5, site). */
.check input { width: 18px; height: 18px; flex: none; margin: 0; }
.field { margin-top: calc(3 * var(--en-base)); }
.field__hint { font-size: 14px; margin-bottom: var(--en-base); }
/* Lignes d'état (role="status") : l'aide du champ (§ 4.5), en gras ; vides, elles ne prennent pas de place. */
.status-line { font-weight: 700; margin-top: var(--en-base); }
.status-line:empty { display: none; }
/* Liste de choix de la durée de l'agent : le champ du § 4.5, à sa largeur de contenu. */
.field__select { width: auto; min-width: 12em; }
.field__row { display: flex; flex-wrap: wrap; gap: calc(2 * var(--en-base)); align-items: flex-start; }
.field__row .en-input { flex: 1 1 14em; min-width: 0; }
.meta-line { font-weight: 700; }
.choice { border: 0; padding: 0; margin: 0 0 calc(3 * var(--en-base)); }
.choice .check { margin-bottom: var(--en-base); align-items: flex-start; }
.choice .check input { margin-top: 3px; }

/* Étapes (§ 4.8, app) : ligne verticale de 3 px à gauche, pastilles rondes de 40 px blanches tracées,
   numéro en Tilt Warp, titres Tilt Warp 20 px. États (composition [R]) : en cours violet, faite jaune,
   en erreur trait rouge (couleur d'état sur la bordure, § 2.5). */
.steps { list-style: none; padding: 0; margin: 0 0 calc(3 * var(--en-base)); position: relative; counter-reset: step; }
.steps:not(:empty)::before {
  content: "";
  position: absolute;
  left: calc(20px - var(--en-border-width) / 2);
  top: 20px;
  bottom: 20px;
  width: var(--en-border-width);
  background: var(--en-ink);
}
.steps > li { position: relative; counter-increment: step; padding-left: calc(7 * var(--en-base)); min-height: 40px; margin-bottom: calc(2 * var(--en-base)); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--en-surface);
  border: var(--en-border-width) solid var(--en-ink);
  font-family: var(--en-font-title);
  font-size: var(--en-fs-small);
}
.steps > li[data-status="active"]::before, .steps > li[data-status="waiting"]::before, .steps > li[data-status="action"]::before { background: var(--en-primary); color: #FFFFFF; }
.steps > li[data-status="done"]::before, .steps > li[data-status="skipped"]::before { background: var(--en-secondary); }
.steps > li[data-status="error"]::before, .steps > li[data-status="blocked"]::before { border-color: var(--en-error); }
.steps__title { font-family: var(--en-font-title); font-size: 20px; line-height: 40px; margin: 0; }
.steps__detail { font-size: 16px; margin: 0; }
/* État d'une étape, écrit par la page (fragment 2) : corps 16 px en gras, comme les libellés (§ 3.4). */
.steps__state { font-size: 16px; font-weight: 700; margin: var(--en-base) 0 0; }
.steps__extra { margin-top: var(--en-base); display: grid; gap: var(--en-base); justify-items: start; }
.steps__extra .value { margin: 0; }

/* Onglets (§ 4.8, app) : liste soulignée d'un trait de 3 px, onglets accolés (chevauchement de 3 px),
   marge 16px 24px, sans enfoncement ; variante « contained » : panneau blanc tracé, coins bas à 6 px,
   marge 32 px. Sans JavaScript, les panneaux se lisent l'un sous l'autre, en cartes (§ 4.3). */
.tabs__list { display: flex; border-bottom: var(--en-border-width) solid var(--en-ink); }
.tabs__tab {
  min-height: var(--en-control-height);
  padding: calc(2 * var(--en-base)) calc(1.5 * var(--en-base));
  margin: 0 calc(-1 * var(--en-border-width)) calc(-1 * var(--en-border-width)) 0;
  font-family: var(--en-font-title);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--en-ink);
  background: var(--en-light);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius) var(--en-radius) 0 0;
  cursor: pointer;
}
.tabs__tab[aria-selected="true"] { position: relative; z-index: 1; background: var(--en-surface); border-bottom-color: var(--en-surface); }
@media (min-width: 768px) {
  .tabs__tab { padding: calc(2 * var(--en-base)) calc(3 * var(--en-base)); font-size: var(--en-fs-small); }
}
.tabs__panel {
  background: var(--en-surface);
  color: var(--en-ink);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
  box-shadow: 0 var(--en-depth) 0 calc(-1 * var(--en-border-width)) var(--en-light), 0 var(--en-depth) 0 0 var(--en-ink);
  margin-bottom: calc(var(--en-depth) + var(--en-gap));
  padding: var(--en-card-padding);
}
.tabs--js .tabs__panel { border-top: 0; border-radius: 0 0 var(--en-radius) var(--en-radius); margin-bottom: var(--en-depth); }
.tabs--js .tabs__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.budgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10em, 100%), 1fr)); gap: calc(2 * var(--en-base)); margin: 0 0 calc(3 * var(--en-base)); }
.budgets dd { margin: 0; font-weight: 700; }
.budgets__cap { font-weight: 300; }
.agent-report:empty { display: none; }
/* Texte écrit par la page (did, identifiants tronqués, états) : coupé n'importe où plutôt que de
   déborder à 375 px (§ 10, aucun défilement horizontal). */
.agent-report, .steps__state, .steps__detail, .status-line { overflow-wrap: anywhere; }

/* Fils (chat, lobby, offres) : lignes séparées par le trait clair des tableaux (§ 4.9). */
.feed { list-style: none; padding: 0; margin: 0; }
.feed > li { padding: var(--en-base) 0; border-bottom: var(--en-border-width) solid var(--en-light); overflow-wrap: anywhere; font-size: 16px; }
.feed > li:last-child { border-bottom: 0; }
.feed__empty { font-style: normal; font-weight: 700; }
/* Ligne d'un message reçu : auteur et numéro en 14 px gras (comme .source), texte en corps 16 px. */
.feed__meta { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.feed__text { margin: 0; }
/* Badge « verified » : badge sm de l'app (Tilt Warp 12 px capitales, marge 2px 8px, § 4.4), texte en
   encre et vert de succès sur la bordure (§ 2.5 [R]). */
.badge-verified {
  display: inline-block;
  padding: 2px var(--en-base);
  font-family: var(--en-font-title);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--en-ink);
  background: var(--en-surface);
  border: var(--en-border-width) solid var(--en-success);
  border-radius: var(--en-radius);
}

/* 5. Live on FLOP : section sombre à vagues haute et basse (§ 5.5, point 4 ; § 6.2) ---------------- */

/* Vague haute : le tracé de la vague basse du § 8 (is-style-mask-2), retourné verticalement, porté par
   un élément décoratif. La charte ne recopie que la vague basse ; le § 6.2 [R] interdit de dessiner
   d'autres courbes : on reprend donc celle-ci, sans la redessiner. */
.has-wave-top { padding-top: calc(219px + var(--en-page-padding)); }
.en-section > .page-wave-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 219px;
  padding: 0;
  z-index: 1;
}
.page-wave-top::before { scale: 1 -1; }
.live__grid { display: grid; gap: var(--en-gap); }
@media (min-width: 1024px) { .live__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feed-card .notice { margin-bottom: calc(2 * var(--en-base)); }
.feed-card__rules { font-size: 16px; }

/* 6. FLOP in a nutshell -------------------------------------------------------------------------- */

.roles { list-style: none; padding: 0; margin-bottom: var(--en-gap); }
.facts { list-style: none; padding: 0; margin-top: calc(4 * var(--en-base)); display: grid; gap: calc(3 * var(--en-base)); max-width: var(--en-content); }
/* Chaque fait : trait gauche de 4 px violet, comme les citations du thème (§ 4.9). */
.facts > li { border-left: 4px solid var(--en-primary); padding-left: calc(2 * var(--en-base)); }

/* 7. Roadmap : cartes datées ; étiquette inclinée posée sur le coin haut droit, une par carte
   (§ 4.3, § 4.4). ------------------------------------------------------------------------------- */

.roadmap__list { list-style: none; padding: 0; padding-top: calc(2 * var(--en-base)); align-items: start; }
/* La carte du testnet porte les récompenses déclarées : colonne plus large à partir de 1024 px. */
@media (min-width: 1024px) {
  .roadmap__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
}
.stage { position: relative; }
.stage__tag { position: absolute; top: -16px; right: -10px; }
.stage .source { display: block; margin-top: 4px; }
/* Encart des récompenses déclarées : surface claire tracée sans ombre (§ 4.1, § 2.2). */
.rewards {
  margin-top: calc(3 * var(--en-base));
  padding: calc(2 * var(--en-base));
  background: var(--en-light);
  border: var(--en-border-width) solid var(--en-ink);
  border-radius: var(--en-radius);
}
.rewards__title { font-family: var(--en-font-title); font-weight: 400; font-size: 20px; margin: 0 0 var(--en-base); }
/* Mention obligatoire : badge en capitales, avertissement sur la bordure (§ 4.4, § 2.5 [R]). */
.rewards__flag {
  display: inline-block;
  padding: 2px var(--en-base);
  font-family: var(--en-font-title);
  font-size: 12px;
  text-transform: uppercase;
  background: var(--en-surface);
  border: var(--en-border-width) solid var(--en-warning);
  border-radius: var(--en-radius);
}
.rewards__devnet { padding-top: calc(2 * var(--en-base)); border-top: var(--en-border-width) solid var(--en-surface); }

/* 8. Read this first ----------------------------------------------------------------------------- */

.warnings { display: grid; gap: calc(2 * var(--en-base)); padding: var(--en-card-padding) var(--en-card-padding) var(--en-card-padding) calc(var(--en-card-padding) + 2 * var(--en-base)); max-width: var(--en-content); }
.warnings > li::marker { color: var(--en-primary); }

/* 9. Run FLOP with EasyNode : discret, texte centré dans la colonne de lecture (§ 5.2). */

.easynode__inner { max-width: var(--en-content); text-align: center; }
.easynode__title { font-size: var(--en-fs-big); line-height: 1; }
/* Signature de la marque (§ 1.1), en Tilt Warp violet comme un surtitre (§ 2.1). */
.easynode__tagline { font-family: var(--en-font-title); color: var(--en-primary); font-size: var(--en-fs-medium); }

/* 10. Pied de page : violet tramé à vague haute, logo blanc, liens blancs en gras (§ 4.6). ------- */

.site-footer { padding-bottom: calc(2 * var(--en-page-padding)); }
.site-footer__inner { font-size: 16px; }
.site-footer__inner > * { max-width: var(--en-content); }
.site-footer a:not(.en-btn) { font-weight: 700; }
/* Logo blanc en fichier fourni (§ 1.4) ; ce fichier n'a pas de marge propre (264×80, sans blanc autour) :
   32 px dessous pour la zone de protection, que la charte ne chiffre pas pour le logo complet (§ 1.4, § 11). */
.site-footer__logo { margin-bottom: calc(4 * var(--en-base)); }
.site-footer__logo img { height: 56px; width: auto; }
.site-footer__built { font-family: var(--en-font-title); font-size: var(--en-fs-medium); }