/* Sourdine — landing stylesheet
   Direction : « atelier calme » — verts sombres chauds, laiton, Fraunces en display.
   Sombre par défaut (assorti aux captures de l'app), clair via prefers-color-scheme. */

/* ---------- Polices auto-hébergées (latin, variables) ---------- */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-latin-var.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('fonts/plus-jakarta-sans-latin-var.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
    --bg: #101513;
    --surface: #18201c;
    --surface-2: #1f2a24;
    --ink: #f1efe8;
    --ink-2: #98a69e;
    --line: #263129;
    --accent: #7fbfa0;   /* vert sourdine */
    --accent-deep: #2e7d5b;
    --brass: #d9a05b;    /* laiton / liège */
    --quiet: #8fb4cc;    /* bleu « gelé » */
    --danger: #d97e6a;
    --glass-bg: rgba(24, 32, 28, 0.6);
    --glass-line: rgba(241, 239, 232, 0.07);
    --shadow: 0 24px 48px rgba(4, 8, 6, 0.45);
    --radius: 16px;
    --radius-s: 12px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f6f4ee;
        --surface: #ffffff;
        --surface-2: #ece9e1;
        --ink: #1d2622;
        --ink-2: #5c6b63;
        --line: #ddd8cc;
        --accent: #2e7d5b;
        --accent-deep: #24634a;
        --brass: #a9763b;
        --quiet: #4e7a96;
        --danger: #b3543f;
        --glass-bg: rgba(255, 255, 255, 0.65);
        --glass-line: rgba(29, 38, 34, 0.08);
        --shadow: 0 24px 48px rgba(63, 70, 66, 0.14);
    }
}

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

html {
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', 'Avenir Next', sans-serif;
    background-color: var(--bg);
    color: var(--ink);
}
body { font-size: 16px; line-height: 1.6; }

h1, h2, h3, .price {
    font-family: 'Fraunces', 'Georgia', serif;
    font-weight: 560;
    letter-spacing: -0.01em;
}
code {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 0.86em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 6px;
}
a { color: inherit; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 var(--s5); }

/* ---------- Navigation ---------- */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: 68px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    z-index: 100;
}
.navbar-container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.brand-mark { width: 22px; height: 22px; fill: var(--accent); }
.brand-name {
    font-family: 'Fraunces', serif;
    font-size: 21px;
    font-weight: 620;
    letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: var(--s5); }
.nav-links a {
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); }

/* ---------- Boutons ---------- */
.btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 650;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary {
    background-color: var(--accent-deep);
    color: #f4f1e9;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-deep) 35%, transparent);
}
.btn-primary:hover { transform: translateY(-1px); background-color: color-mix(in srgb, var(--accent-deep) 88%, #000); }
.btn-primary-sm {
    background-color: var(--accent-deep);
    color: #f4f1e9 !important;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
}
.btn-secondary {
    background-color: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-secondary:hover { background-color: var(--surface-2); }
.btn-block { display: block; width: 100%; }

/* ---------- Héros ---------- */
.hero {
    position: relative;
    padding: 164px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(720px 420px at 78% 8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
        radial-gradient(560px 380px at 8% 92%, color-mix(in srgb, var(--brass) 7%, transparent), transparent 70%);
}
.hero-wave {
    position: absolute;
    inset: auto 0 4%;
    width: 100%;
    height: 240px;
    stroke: var(--accent);
    stroke-width: 1.6;
    fill: none;
    opacity: 0.16;
    pointer-events: none;
}
.hero-container {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s7);
    align-items: center;
}
.hero-content h1 {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.08;
    margin-bottom: var(--s5);
    font-weight: 590;
}
.hero-content p { color: var(--ink-2); margin-bottom: var(--s5); max-width: 46ch; }
.badge {
    display: inline-block;
    padding: 6px 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: var(--s4);
}
.fleet-badge {
    font-size: 13px;
    color: var(--brass);
    margin: calc(-1 * var(--s3)) 0 var(--s4);
}
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ---------- Fenêtre simulée ---------- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.window-header {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--s4);
    border-bottom: 1px solid var(--glass-line);
    background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.window-dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-close { background-color: #e0655a; }
.dot-min   { background-color: #e0a94f; }
.dot-max   { background-color: #6cbf74; }
.window-title {
    margin: 0 auto;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 550;
    font-family: 'Fraunces', serif;
    letter-spacing: 0.02em;
}
.window-body { padding: var(--s5); }
.engine-row {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 13px;
    font-weight: 600;
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--glass-line);
    margin-bottom: var(--s3);
}
.engine-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 65%, transparent);
}
.engine-meta { margin-left: auto; color: var(--ink-2); font-weight: 500; }
.rule-list { list-style: none; }
.rule-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 2px;
    font-size: 14px;
}
.rule-list li + li { border-top: 1px solid color-mix(in srgb, var(--glass-line) 60%, transparent); }
.app-name { font-weight: 550; }
.chip {
    font-size: 11.5px;
    font-weight: 650;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.chip-eco {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.chip-frozen {
    color: var(--quiet);
    background: color-mix(in srgb, var(--quiet) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--quiet) 26%, transparent);
}
.fleet-card {
    margin-top: var(--s4);
    padding: var(--s4);
    border: 1px dashed color-mix(in srgb, var(--brass) 45%, transparent);
    border-radius: var(--radius-s);
}
.fleet-card h3 { font-size: 13px; margin-bottom: var(--s2); color: var(--brass); font-weight: 600; }
.fleet-card h3 span { font-weight: 400; color: var(--ink-2); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; }
.fleet-card ul { list-style: none; font-size: 13px; }
.fleet-card li { margin-bottom: 4px; color: var(--ink-2); }
.fleet-card strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Bandeau KPI ---------- */
.kpi-strip { padding: var(--s6) 0; border-top: 1px solid var(--line); background: var(--surface); }
.kpi-strip-inner { display: flex; justify-content: center; gap: var(--s8); flex-wrap: wrap; }
.kpi { text-align: center; }
.kpi-value {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.kpi-label { font-size: 13px; color: var(--ink-2); }
.kpi-note { text-align: center; font-size: 12px; color: var(--ink-2); margin-top: var(--s4); }

/* ---------- Sections ---------- */
.fermata { display: flex; justify-content: center; margin-bottom: var(--s4); }
.fermata svg {
    width: 44px; height: 22px;
    stroke: var(--brass);
    stroke-width: 2.4;
    fill: var(--brass);
    opacity: 0.75;
}
.section-title { text-align: center; font-size: clamp(28px, 3.6vw, 38px); margin-bottom: var(--s2); font-weight: 580; }
.section-subtitle {
    text-align: center;
    color: var(--ink-2);
    margin: 0 auto var(--s7);
    max-width: 58ch;
}

/* ---------- Fonctionnalités ---------- */
.features { padding: 104px 0; border-top: 1px solid var(--line); }
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.feature-card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    padding: var(--s6);
    border-radius: var(--radius-s);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.feature-lead { border-color: color-mix(in srgb, var(--quiet) 45%, var(--line)); }
.feature-icon { width: 34px; height: 34px; border-radius: 9px; margin-bottom: var(--s4); position: relative; }
.feature-icon::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    mask-size: 20px; mask-position: center; mask-repeat: no-repeat;
    -webkit-mask-size: 20px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
}
.icon-frozen { background: color-mix(in srgb, var(--quiet) 16%, transparent); }
.icon-frozen::after { background: var(--quiet); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2zM5 7l1.5-1.5L12 11l5.5-5.5L19 7l-7 7z' /%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v18h-2zM5 7l1.5-1.5L12 11l5.5-5.5L19 7l-7 7z' /%3E%3C/svg%3E"); }
.icon-eco { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.icon-eco::after { background: var(--accent); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 9 4 13 4 16a8 8 0 0 0 16 0c0-3-3-7-8-13z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 9 4 13 4 16a8 8 0 0 0 16 0c0-3-3-7-8-13z'/%3E%3C/svg%3E"); }
.icon-focus { background: color-mix(in srgb, var(--brass) 16%, transparent); }
.icon-focus::after { background: var(--brass); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }
.icon-light { background: color-mix(in srgb, var(--ink-2) 16%, transparent); }
.icon-light::after { background: var(--ink-2); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l-4 7h4L8 21l2.5-8H6z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12l-4 7h4L8 21l2.5-8H6z'/%3E%3C/svg%3E"); }
.feature-card h3 { font-size: 19px; margin-bottom: var(--s3); font-weight: 580; }
.feature-card p { color: var(--ink-2); font-size: 14.5px; }

/* ---------- Mesures ---------- */
.mesures {
    padding: 104px 0;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 42%, var(--bg));
}
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.method-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: var(--s6);
}
.method-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: var(--s4);
}
.tag-measured  { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tag-verified  { color: var(--quiet);  background: color-mix(in srgb, var(--quiet) 14%, transparent); }
.tag-estimated { color: var(--brass);  background: color-mix(in srgb, var(--brass) 14%, transparent); }
.method-card h3 { font-size: 19px; margin-bottom: var(--s3); font-weight: 580; }
.method-card p { color: var(--ink-2); font-size: 14px; }
.table-legend {
    margin: var(--s6) auto 0;
    font-size: 12.5px;
    color: var(--ink-2);
    text-align: center;
    max-width: 72ch;
}

/* ---------- Prix ---------- */
.pricing { padding: 104px 0; border-top: 1px solid var(--line); }
.pricing-container { display: flex; justify-content: center; }
.pricing-card {
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: var(--radius);
    padding: var(--s7);
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 12px 36px color-mix(in srgb, var(--accent-deep) 12%, transparent);
}
.pricing-card h2 { font-size: 27px; font-weight: 580; }
.price { font-size: 58px; margin: var(--s4) 0 var(--s1); color: var(--ink); }
.price-subtitle { color: var(--ink-2); font-size: 13px; margin-bottom: var(--s6); }
.pricing-features { list-style: none; text-align: left; margin-bottom: var(--s6); }
.pricing-features li {
    font-size: 14px;
    margin-bottom: var(--s3);
    display: flex;
    align-items: baseline;
    gap: var(--s2);
}
.pricing-features li::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* ---------- Pied de page ---------- */
.footer {
    padding: var(--s7) 0;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--ink-2);
    font-size: 13px;
}
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer-note { margin-top: var(--s2); font-size: 12px; opacity: 0.8; }

/* ---------- Page merci (livraison de licence) ---------- */
.merci-hero { min-height: 72vh; display: flex; align-items: center; }
.merci-container { display: flex; justify-content: center; }
.merci-card { max-width: 560px; width: 100%; padding: var(--s7); text-align: center; }
.merci-card h1 { font-size: 30px; font-weight: 590; margin-bottom: var(--s3); }
.merci-sub { color: var(--ink-2); font-size: 14.5px; margin-bottom: var(--s5); }
.license-box {
    background: var(--surface-2);
    border: 1px dashed color-mix(in srgb, var(--brass) 50%, transparent);
    border-radius: var(--radius-s);
    padding: var(--s4);
    margin-bottom: var(--s4);
    overflow-wrap: anywhere;
}
.license-box code {
    background: none; border: none; padding: 0;
    font-size: 12.5px; line-height: 1.5;
}
.merci-steps {
    text-align: left;
    margin: var(--s5) auto 0;
    max-width: 40ch;
    color: var(--ink-2);
    font-size: 14px;
    padding-left: var(--s5);
}
.merci-steps li { margin-bottom: var(--s2); }
.merci-note { margin-top: var(--s4); font-size: 12.5px; color: var(--brass); }
.merci-spinner {
    width: 28px; height: 28px;
    margin: var(--s4) auto 0;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.buy-note { margin-top: var(--s3); font-size: 12px; color: var(--ink-2); }

/* ---------- Apparition (chargement) ---------- */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) forwards; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.16s; }
.reveal.d3 { animation-delay: 0.26s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { animation: none; opacity: 1; transform: none; }
    .btn, .feature-card { transition: none; }
}

/* ---------- Adaptatif ---------- */
@media (max-width: 900px) {
    .hero-container { grid-template-columns: 1fr; }
    .hero-visual { max-width: 520px; }
    .method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; }
    .kpi-strip-inner { gap: var(--s6); }
}
@media (max-width: 520px) {
    .nav-links a:not(.btn-primary-sm) { display: none; }
    .hero { padding-top: 128px; }
    .hero-actions .btn { width: 100%; }
}