/* ═══════════════════════════════════════════════════════════════════════
   Eco Network — website
   ═══════════════════════════════════════════════════════════════════════

   Palette reprise de l'app (lib/core/theme/eco_colors.dart) : nuit profonde
   et vert lime. Le site, la fiche Play et l'application doivent se lire comme
   un seul produit.

   Les classes des pages légales (.wrap, header.brand, h2.title, .updated,
   .card, nav.links) sont conservées telles quelles : ces pages sont liées
   depuis la Play Console et ne doivent pas casser.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:        #070B12;
  --bg-soft:   #0D131D;
  --card:      #111927;
  --card-2:    #0F1622;
  --line:      rgba(255,255,255,.08);
  --line-lit:  rgba(198,249,78,.28);

  --lime:      #C6F94E;
  --lime-deep: #6FD44A;
  --ink:       #FFFFFF;
  --muted:     #8B95A9;
  --body:      #C3CDD9;
  --up:        #4ADE80;
  --down:      #FF6B6B;

  --radius:    22px;
  --shell:     1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height:auto` est indispensable : sans lui, l'attribut height="911" du HTML
   reste appliqué pendant que max-width réduit la largeur — l'image est alors
   étirée verticalement. C'est ce qui déformait toutes les captures. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Révélation au défilement ─────────────────────────────────────────── */

.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ── Barre de navigation ──────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(7,11,18,.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav-in {
  max-width: var(--shell); margin: 0 auto;
  padding: 13px 22px; display: flex; align-items: center; gap: 22px;
}
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800;
        font-size: 16.5px; color: var(--ink); letter-spacing: -.2px; }
.logo:hover { text-decoration: none; }
.logo img { width: 34px; height: 34px; border-radius: 10px; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 600;
               transition: color .2s ease; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 780px) { .nav-links a.hide-sm { display: none; } }

/* ── Boutons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: -.1px;
  background: var(--lime); color: #0A1200; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 14px 34px -16px rgba(198,249,78,.75);
}
.btn:hover { transform: translateY(-2px); text-decoration: none;
             box-shadow: 0 20px 42px -16px rgba(198,249,78,.9); }
.btn.small { padding: 10px 20px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink);
             border-color: rgba(255,255,255,.16); box-shadow: none; }
.btn.ghost:hover { border-color: var(--lime); color: var(--lime); }

/* ── Rythme général ───────────────────────────────────────────────────── */

section { padding: 96px 22px; }
.inner { max-width: var(--shell); margin: 0 auto; }
.center { text-align: center; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 6px 15px; border-radius: 999px;
  background: rgba(198,249,78,.09); border: 1px solid var(--line-lit);
  color: var(--lime); font-size: 12.5px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(198,249,78,.55); }
  50%     { opacity: .55; box-shadow: 0 0 0 7px rgba(198,249,78,0); }
}

h1.hero {
  font-size: clamp(32px, 3.9vw, 48px); line-height: 1.1;
  letter-spacing: -1.6px; font-weight: 800; margin: 0 0 20px;
}
h1.hero em { font-style: normal; color: var(--lime); }

.lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted);
        max-width: 620px; margin: 0 0 32px; }
.center .lead, .narrow .lead { margin-left: auto; margin-right: auto; }

h2.sec { font-size: clamp(27px, 3.6vw, 40px); line-height: 1.15;
         letter-spacing: -1.2px; font-weight: 800; margin: 0 0 16px; }
.sec-sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 50px; }
.center .sec-sub { margin-left: auto; margin-right: auto; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero-wrap { position: relative; padding: 58px 22px 10px; overflow: hidden; }
.hero-wrap::before {
  content: ""; position: absolute; inset: -340px 0 auto; height: 800px;
  pointer-events: none;
  background: radial-gradient(660px 400px at 50% 320px, rgba(111,212,74,.22), transparent 70%);
}
.hero-grid {
  position: relative; max-width: var(--shell); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 46px; align-items: center;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.hero-note { margin: 20px 0 0; font-size: 13.5px; color: var(--muted); }
.hero-note b { color: var(--ink); font-weight: 700; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-grid .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

/* ── Châssis de téléphone ─────────────────────────────────────────────── */

.phone {
  width: 268px; margin: 0 auto; padding: 9px; border-radius: 36px;
  background: #161B26; border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 46px 84px -34px rgba(0,0,0,.92), 0 0 0 1px rgba(198,249,78,.07);
}
.phone img { border-radius: 28px; }
.phone.tilt { transform: rotate(-2deg); }
@media (max-width: 480px) { .phone { width: min(268px, 76vw); } }

/* ── Phase du projet ──────────────────────────────────────────────────── */

.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .phases { grid-template-columns: 1fr; } }

.phase {
  position: relative; padding: 28px 26px 26px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 20px;
}
.phase.now { border-color: var(--line-lit); background: var(--card);
             box-shadow: 0 30px 70px -50px rgba(198,249,78,.55); }
.phase .tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
}
.phase.now .tag { color: #0A1200; background: var(--lime); border-color: transparent; }
.phase h3 { font-size: 19px; margin: 0 0 9px; font-weight: 700; letter-spacing: -.3px; }
.phase p  { margin: 0; color: var(--muted); font-size: 15px; }

/* ── Tuiles ───────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid.c3, .grid.c2 { grid-template-columns: 1fr; } }

.tile {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  transition: border-color .25s ease, transform .25s ease;
}
.tile:hover { border-color: var(--line-lit); transform: translateY(-4px); }
.tile h3 { font-size: 19px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.3px; }
.tile p  { margin: 0; color: var(--muted); font-size: 15.2px; }
.tile .ico {
  width: 48px; height: 48px; margin-bottom: 18px; border-radius: 15px;
  display: grid; place-items: center; font-size: 23px;
  background: rgba(198,249,78,.10); border: 1px solid var(--line-lit);
}

/* ── Déroulé d'une journée ────────────────────────────────────────────── */

.steps { position: relative; padding-left: 42px; }
.steps::before {
  content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px;
  width: 2px; background: linear-gradient(180deg, var(--lime), rgba(198,249,78,.06));
}
.step { position: relative; padding: 0 0 34px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: -34px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 5px rgba(198,249,78,.12);
}
.step .when { font-size: 12.5px; font-weight: 800; letter-spacing: .9px;
              text-transform: uppercase; color: var(--lime); }
.step h3 { font-size: 19.5px; margin: 5px 0 8px; font-weight: 700; letter-spacing: -.3px; }
.step p  { margin: 0; color: var(--muted); font-size: 15.4px; }
.step .eg {
  margin-top: 12px; padding: 13px 17px; border-radius: 14px;
  background: rgba(198,249,78,.05); border: 1px solid rgba(198,249,78,.16);
  color: var(--body); font-size: 14.4px;
}
.step .eg b { color: var(--lime); font-weight: 700; }

/* ── Rangées image + texte ────────────────────────────────────────────── */

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 58px;
       align-items: center; margin-bottom: 88px; }
.row:last-child { margin-bottom: 0; }
.row.flip .txt { order: 2; }
.row h3 { font-size: clamp(23px, 2.8vw, 30px); letter-spacing: -.9px;
          margin: 0 0 13px; font-weight: 800; }
.row p  { color: var(--muted); font-size: 16.4px; margin: 0 0 17px; }
.row ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15.4px; }
.row li { margin: 7px 0; }
.row li::marker { color: var(--lime); }
@media (max-width: 880px) {
  .row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; }
  .row.flip .txt { order: 0; }
}

/* ── Bande ────────────────────────────────────────────────────────────── */

.band { background: linear-gradient(180deg, var(--bg-soft), var(--bg));
        border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ── Aperçu du marché (démonstration de la donnée réelle) ─────────────── */

.mkt {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 24px; padding: 8px; overflow: hidden;
}
.mkt-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px 12px;
}
.mkt-head .live { display: inline-flex; align-items: center; gap: 8px;
                  color: var(--lime); font-size: 13px; font-weight: 700; }
.mkt-head .live i { width: 7px; height: 7px; border-radius: 50%;
                    background: var(--lime); animation: pulse 2.2s ease-in-out infinite; }
.mkt-head .age { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.mkt-head select {
  background: rgba(255,255,255,.04); color: var(--ink); font-size: 13px;
  font-weight: 600; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; font-family: inherit;
}
.mkt-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 13px 18px; border-top: 1px solid var(--line);
}
.mkt-row .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mkt-row .sym {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.06); color: var(--ink);
}
.mkt-row .nm { min-width: 0; }
.mkt-row .nm b { display: block; font-size: 15px; font-weight: 700;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-row .nm span { font-size: 12.5px; color: var(--muted); }
.mkt-row .px { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mkt-row .ch { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
               padding: 3px 9px; border-radius: 8px; min-width: 74px; text-align: right; }
.mkt-row .ch.up   { color: var(--up);   background: rgba(74,222,128,.10); }
.mkt-row .ch.down { color: var(--down); background: rgba(255,107,107,.10); }
.mkt-row.flash-up   { animation: flashUp .8s ease; }
.mkt-row.flash-down { animation: flashDown .8s ease; }
@keyframes flashUp   { from { background: rgba(74,222,128,.10); } to { background: transparent; } }
@keyframes flashDown { from { background: rgba(255,107,107,.10); } to { background: transparent; } }
.mkt-note { padding: 14px 18px 10px; color: var(--muted); font-size: 12.8px; }
.mkt-skeleton { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 560px) {
  .mkt-row { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; }
  .mkt-row .ch { grid-column: 2; min-width: 0; }
  .mkt-head { padding: 12px 14px 10px; }
}

/* ── Utilité du token : un aperçu, le détail est dans le livre blanc ──── */

.utility {
  background: var(--card); border: 1px solid var(--line-lit);
  border-radius: 28px; padding: 46px 34px; text-align: center;
  box-shadow: 0 40px 100px -60px rgba(198,249,78,.5);
}
.util-chips { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center;
              margin: 26px 0 30px; }
.util-chips span {
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--body);
}

/* ── Téléchargement ───────────────────────────────────────────────────── */

.download {
  background: var(--card); border: 1px solid var(--line-lit);
  border-radius: 30px; padding: 60px 34px; text-align: center;
  box-shadow: 0 40px 90px -50px rgba(198,249,78,.35);
}
.store { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.soon { display: inline-flex; align-items: center; gap: 10px;
        padding: 13px 24px; border-radius: 999px;
        border: 1px dashed rgba(255,255,255,.18); color: var(--muted);
        font-size: 14.5px; font-weight: 600; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

details.faq { border: 1px solid var(--line); border-radius: 16px;
              padding: 19px 24px; margin-bottom: 11px; background: rgba(255,255,255,.02); }
details.faq[open] { border-color: var(--line-lit); }
details.faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px;
                      list-style: none; display: flex; align-items: center; gap: 14px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; color: var(--lime);
                             font-size: 22px; font-weight: 400; line-height: 1; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { color: var(--muted); font-size: 15.4px; margin: 13px 0 0; }

/* ── Pied de page du site ─────────────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--line); padding: 54px 22px 44px;
             background: var(--bg-soft); }
.foot-in { max-width: var(--shell); margin: 0 auto;
           display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.foot-in .about { max-width: 320px; }
.foot-in .about p { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.foot-cols { margin-left: auto; display: flex; flex-wrap: wrap; gap: 52px; }
.foot-cols h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px;
                color: var(--muted); margin: 0 0 14px; font-weight: 700; }
.foot-cols a { display: block; color: var(--ink); font-size: 14.5px;
               font-weight: 500; margin-bottom: 9px; }
.foot-cols a:hover { color: var(--lime); text-decoration: none; }
.legal-note { max-width: var(--shell); margin: 42px auto 0; padding-top: 24px;
              border-top: 1px solid var(--line);
              color: var(--muted); font-size: 12.6px; line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════════════
   Pages document — livre blanc et pages légales liées depuis Play.
   ═══════════════════════════════════════════════════════════════════════ */

.wrap { max-width: 800px; margin: 0 auto; padding: 44px 22px 96px; }

header.brand {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; margin-bottom: 34px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
}
header.brand .dot {
  width: 44px; height: 44px; border-radius: 13px; flex: none; overflow: hidden;
  background: linear-gradient(150deg, var(--lime), var(--lime-deep));
  color: #0A1200; display: grid; place-items: center; font-weight: 900; font-size: 21px;
}
header.brand .dot img { width: 100%; height: 100%; border-radius: 13px; }
header.brand h1 { font-size: 18px; margin: 0; letter-spacing: -.3px; }
header.brand h1 span { display: block; font-size: 12.5px; font-weight: 600;
                       color: var(--muted); letter-spacing: .2px; }
header.brand a.back { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }
header.brand a.back:hover { color: var(--lime); text-decoration: none; }

h2.title { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; margin: 6px 0 10px;
           letter-spacing: -1.4px; font-weight: 800; }
.updated { display: inline-block; color: var(--lime);
           background: rgba(198,249,78,.09); border: 1px solid var(--line-lit);
           padding: 4px 13px; border-radius: 999px;
           font-size: 12.5px; font-weight: 700; margin: 0 0 34px; }

.wrap h3 { font-size: 20px; margin: 44px 0 12px; font-weight: 700;
           letter-spacing: -.4px; display: flex; align-items: center; gap: 11px;
           scroll-margin-top: 80px; }
.wrap h3::before { content: ""; width: 8px; height: 8px; border-radius: 3px; flex: none;
                   background: linear-gradient(150deg, var(--lime), var(--lime-deep));
                   box-shadow: 0 0 0 4px rgba(198,249,78,.12); }
.wrap h4 { font-size: 16px; margin: 26px 0 8px; font-weight: 700; }

.wrap p, .wrap li { font-size: 15.6px; color: var(--body); }
.wrap ul, .wrap ol { padding-left: 22px; }
.wrap li { margin: 6px 0; }
.wrap li::marker { color: var(--lime-deep); }
.wrap strong { color: var(--ink); }

.card { background: var(--card); border: 1px solid var(--line);
        border-left: 3px solid var(--lime); border-radius: 16px;
        padding: 18px 22px; margin: 22px 0; }
.card p:first-child { margin-top: 0; }
.card p:last-child  { margin-bottom: 0; }

.toc { background: rgba(255,255,255,.02); border: 1px solid var(--line);
       border-radius: 16px; padding: 22px 26px; margin: 30px 0 44px; }
.toc h4 { margin: 0 0 12px; font-size: 12.5px; text-transform: uppercase;
          letter-spacing: 1px; color: var(--muted); }
.toc ol { margin: 0; padding-left: 20px; }
.toc li { margin: 5px 0; }
.toc a { font-weight: 500; color: var(--body); }
.toc a:hover { color: var(--lime); }

nav.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }
nav.links a { background: transparent; border: 1px solid rgba(255,255,255,.14);
              color: var(--ink); border-radius: 999px; padding: 11px 20px;
              font-weight: 600; font-size: 14.5px; }
nav.links a:hover { border-color: var(--lime); color: var(--lime); text-decoration: none; }

footer { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
         color: var(--muted); font-size: 13px; }