/* ============================================================================
   SIGNALO — landing page
   The 3D stage (css/styles.css + js/app.js) carries chapters 01–03; everything
   after it is a regular, responsive document flow (sections 04–12).
   Green = citizen, red = city hall, pale lime = the AI.
   ============================================================================ */
:root {
    --green: #a8e231;
    --green-soft: rgba(168, 226, 49, 0.12);
    --green-line: rgba(168, 226, 49, 0.4);
    --red: #ff4d55;
    --red-soft: rgba(255, 77, 85, 0.12);
    --red-line: rgba(255, 77, 85, 0.4);
    --ai: #e8ffb0;
    --ink: #f2f7ff;
    --text: #c9d0db;
    --dim: #9aa4b4;
    --bg: #030403;
    --gutter: 60px;
    --city-h: clamp(90px, 17vh, 170px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mark { display: block; width: 100%; height: 100%; fill: currentColor; }
.t-green { color: var(--green); }
.t-red { color: var(--red); }
.t-muted { color: #8b95a6; }
.t-glow { color: var(--ink); text-shadow: 0 0 60px rgba(168, 226, 49, 0.45); }
.story, .story *, .menu * { user-select: text; }
.story a, .story button, .story .compare, .story .compare * { user-select: none; }

/* ---- Layers: canvas (1) < 3D chapters (7) < page flow (8) < rail (12) < header (20).
   The page flow covers the stage chapters as it rises, so stage copy can never sit on it. */
.cinematic-container { z-index: 7; }
.header-progress { z-index: 21; }

/* ---- Header: readable over the 3D stage and over the page ---- */
.main-header { position: fixed; z-index: 20; top: 0; left: 0; right: 0; padding: 0 var(--gutter); }
.main-header::before {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: -18px; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    transition: background 0.4s; pointer-events: none;
}
body.contact-open .main-header::before {
    bottom: 0; background: rgba(3, 4, 3, 0.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header-nav { gap: 26px; }
.header-actions { gap: 16px; }
.menu-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 13px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(0, 0, 0, 0.3);
    color: #ffffff; font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.04em;
    transition: border-color 0.3s, background 0.3s;
}
.menu-btn:hover { border-color: rgba(255, 255, 255, 0.7); }
.menu-btn-lines { position: relative; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.menu-btn-lines::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1.5px; background: currentColor; }
@media (max-width: 1180px) { .header-nav { display: none; } }

/* ---- Full menu: every chapter, numbered ---- */
.menu {
    position: fixed; inset: 0; z-index: 9500; overflow-y: auto;
    display: flex; align-items: center; justify-content: center; padding: 96px 24px 48px;
    background: rgba(2, 3, 2, 0.95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; transition: opacity 0.35s;
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu-close {
    position: fixed; top: 16px; right: 20px; height: 38px; padding: 0 16px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #ffffff;
    font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.04em;
}
.menu-list { list-style: none; width: 100%; max-width: 920px; columns: 2; column-gap: 64px; }
.menu-list li { break-inside: avoid; }
.menu-list a {
    display: flex; align-items: baseline; gap: 18px; padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--ink); text-decoration: none; font-size: clamp(22px, 2.8vw, 34px); font-weight: 500; letter-spacing: -0.02em;
    transition: color 0.25s, padding 0.25s;
}
.menu-list a span { width: 26px; flex: none; font-size: 13px; letter-spacing: 0.04em; color: var(--dim); font-variant-numeric: tabular-nums; }
.menu-list a:hover { padding-left: 6px; color: #ffffff; }
.menu-list .m-green a, .menu-list .m-green a span { color: var(--green); }
.menu-list .m-red a, .menu-list .m-red a span { color: var(--red); }
@media (max-width: 640px) { .menu-list { columns: 1; } }

/* ---- Progress rail: twelve chapters ---- */
.rail {
    position: fixed; right: 20px; top: 50%; z-index: 12; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 6px;
}
.rail a { position: relative; display: block; width: 22px; height: 16px; }
.rail a::before {
    content: ''; position: absolute; right: 0; top: 7px; width: 8px; height: 2px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.28); transition: width 0.35s var(--ease), background 0.35s;
}
.rail a.is-active::before { width: 22px; background: #ffffff; }
.rail a.r-green.is-active::before { background: var(--green); }
.rail a.r-red.is-active::before { background: var(--red); }
.rail a::after {
    content: attr(data-label); position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
    padding: 6px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.82); white-space: nowrap;
    font: 500 11px/1 'Space Grotesk', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff;
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.rail a:hover::after, .rail a:focus-visible::after { opacity: 1; }
@media (max-width: 1023px), (max-aspect-ratio: 1/1) { .rail { display: none; } }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; border-radius: 999px;
    font: 600 13px/1.15 'Space Grotesk', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--green); color: #071004; box-shadow: 0 12px 34px rgba(168, 226, 49, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(168, 226, 49, 0.45); }
.btn-ghost { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(0, 0, 0, 0.28); }
.btn-ghost:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.btn-red { background: var(--red); color: #ffffff; box-shadow: 0 12px 34px rgba(255, 77, 85, 0.3); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(255, 77, 85, 0.45); }
.store-btn {
    display: inline-flex; flex-direction: column; gap: 4px; padding: 10px 18px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); color: #ffffff;
    text-decoration: none; font: 600 16px/1 'Space Grotesk', sans-serif; transition: border-color 0.3s, background 0.3s;
}
.store-btn small { font: 500 10px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #b3bccb; }
.store-btn:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); }

/* ============================================================================
   3D stage: chapters 01–03 (text never shares the object's half of the screen)
   ============================================================================ */
.stage-slide { bottom: auto; }
.stage-anchor { position: absolute; left: 0; top: calc((100% - 100vh) * var(--at)); width: 1px; height: 1px; }
.slide-eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
    font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #d7deea;
}
.eyebrow-num {
    padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.06em; color: #ffffff; font-variant-numeric: tabular-nums;
}
.stage-slide .slide-eyebrow, .hero-tags, .hero-actions, .hero-chain, .problem-cloud li, .solution-kicker, .solution-steps li {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), color 0.5s, background 0.5s, border-color 0.5s;
}
.slide.active .slide-eyebrow, .slide.active .hero-tags, .slide.active .hero-actions, .slide.active .hero-chain,
.slide.active .problem-cloud li, .slide.active .solution-kicker, .slide.active .solution-steps li { opacity: 1; transform: none; }
.hero-tags { transition-delay: 0.05s; }
.hero-actions { transition-delay: 0.5s; }
.hero-chain { transition-delay: 0.7s; }

/* 01 · Hero */
#slide-1 {
    left: var(--gutter); top: 84px; bottom: calc(var(--city-h) + 10px); width: min(44vw, 660px);
    display: flex; flex-direction: column; justify-content: center; gap: 26px;
}
.hero-head { display: grid; gap: 18px; }
.hero-foot { display: grid; gap: 22px; justify-items: start; }
.hero-tags { display: flex; align-items: center; gap: 14px; margin: 0; }
.badge-ai {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px;
    font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; color: #071004; background: var(--green);
    box-shadow: 0 0 0 1px rgba(168, 226, 49, 0.5), 0 10px 30px rgba(168, 226, 49, 0.35);
}
.badge-pulse { width: 7px; height: 7px; border-radius: 50%; background: #071004; animation: badge-pulse 1.8s ease-out 4; }
@keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(7, 16, 4, 0.6); } 100% { box-shadow: 0 0 0 9px rgba(7, 16, 4, 0); } }
.hero-brand { font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.34em; text-transform: uppercase; color: #d7deea; }
.slide-title.hero-title {
    margin: 0; font-size: clamp(42px, min(6.6vw, 11.5vh), 116px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500;
}
.hero-title .line:nth-child(2) { color: var(--ink); }
.hero-title .line:nth-child(3) { color: var(--green); }
.slide-desc.hero-lead { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.55; color: #dde3ec; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-chain {
    list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
    font: 600 11px/1 'Space Grotesk', sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-chain li { display: inline-flex; align-items: center; gap: 8px; color: var(--c, #cfd6e6); }
.hero-chain li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.hero-chain li:not(:last-child)::after { content: ''; width: 22px; height: 1px; margin: 0 8px 0 2px; background: linear-gradient(90deg, currentColor, rgba(255, 255, 255, 0.15)); }
.hero-chain .c-city { --c: #aeb6c4; }
.hero-chain .c-citizen { --c: var(--green); }
.hero-chain .c-signalo { --c: #ffffff; }
.hero-chain .c-ai { --c: var(--ai); }
.hero-chain .c-mairie { --c: var(--red); }

@media (min-aspect-ratio: 1/1) and (max-width: 1180px) {
    .hero-chain { letter-spacing: 0.1em; }
    .hero-chain li:not(:last-child)::after { width: 12px; margin: 0 6px 0 2px; }
}

/* The connected city under the hero */
.hero-city {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--city-h); pointer-events: none;
    opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
#slide-1.active ~ .hero-city { opacity: 1; transform: none; }
.hero-city svg { display: block; width: 100%; height: 100%; }
.city-back { fill: rgba(14, 22, 15, 0.78); stroke: rgba(168, 226, 49, 0.28); stroke-width: 1; }
.city-front { fill: url(#g-city); stroke: rgba(168, 226, 49, 0.6); stroke-width: 1.4; filter: drop-shadow(0 -2px 8px rgba(168, 226, 49, 0.25)); }
.city-windows path { stroke: rgba(232, 255, 176, 0.8); stroke-width: 3.2; }
.sig { fill: none; stroke: var(--green); stroke-width: 1.4; stroke-dasharray: 3 11; opacity: 0.75; animation: sig-flow 3.2s linear infinite; animation-delay: var(--d, 0s); }
.sig-red { stroke: var(--red); }
@keyframes sig-flow { to { stroke-dashoffset: -56; } }
.pin { fill: var(--green); }
.pin-ring { fill: none; stroke: var(--green); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out 5; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes ring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.city-mairie path { fill: rgba(28, 6, 8, 0.9); stroke: var(--red); stroke-width: 1.4; }
.mairie-beacon { fill: rgba(255, 77, 85, 0.28); transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out 5 1s; }

/* 02 · Le problème */
.stage-slide.slide-right {
    left: calc(50vw + 24px); right: 96px; top: 84px; bottom: 32px; width: auto; max-width: 640px;
    display: flex; flex-direction: column; justify-content: center;
}
.stage-slide.slide-left {
    left: var(--gutter); top: 84px; bottom: 32px; width: min(44vw, 640px);
    display: flex; flex-direction: column; justify-content: center;
}
.slide-title.problem-title { font-size: clamp(32px, min(4vw, 7.4vh), 64px); line-height: 1.0; margin-bottom: 26px; }
.problem-title .line:nth-child(4) { color: var(--green); }
.problem-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 22px 12px; max-width: 560px; padding: 6px 6px 6px 0; }
.problem-cloud li {
    position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px 12px 13px;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
    color: var(--ink); font-size: 15px; font-weight: 500;
    transition-delay: calc(0.35s + var(--i) * 0.09s);
}
.slide.active .problem-cloud li { transform: translateY(var(--lift, 0)); }
.problem-cloud li:nth-child(2) { --lift: 6px; }
.problem-cloud li:nth-child(3) { --lift: -4px; }
.problem-cloud li:nth-child(5) { --lift: 5px; }
.problem-cloud li:nth-child(6) { --lift: -3px; }
.problem-cloud li::after {
    content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 4px rgba(255, 77, 85, 0.2), 0 0 12px var(--red);
}
.chip-art { flex: none; width: auto; height: 54px; max-width: 68px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(168, 226, 49, 0.28)); }
.problem-cloud li:has(.chip-art) { padding: 7px 16px 7px 8px; gap: 12px; }

/* 03 · La solution */
.slide-title.solution-title { font-size: clamp(36px, min(4.6vw, 8.4vh), 76px); line-height: 0.98; margin-bottom: 14px; }
.solution-title .line:nth-child(3) { color: #ffffff; }
.solution-kicker { margin: 0 0 26px; font-size: clamp(19px, min(2vw, 3.6vh), 30px); font-weight: 500; color: var(--green); transition-delay: 0.3s; }
.solution-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 8px; }
.solution-steps li {
    padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; color: #8b95a6;
    transition-delay: calc(0.55s + var(--i) * 0.3s);
}
.slide.active .solution-steps li { color: var(--ink); border-color: rgba(168, 226, 49, 0.45); background: rgba(168, 226, 49, 0.08); }
.slide.active .solution-steps li:last-child { color: #071004; background: var(--green); border-color: var(--green); }

/* Short landscape screens (laptops with small height, phones on their side) */
@media (min-aspect-ratio: 1/1) and (max-height: 640px) {
    :root { --city-h: 70px; }
    #slide-1 { gap: 16px; }
    .hero-head { gap: 12px; }
    .hero-foot { gap: 14px; }
    .hero-chain { display: none; }
    .btn { min-height: 44px; padding: 0 18px; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 460px) {
    .hero-city, .hero-lead { display: none; }
    .problem-cloud li { padding: 8px 12px; font-size: 13px; }
    .solution-steps li { padding: 6px 10px; }
}

/* Portrait (phones, tablets): text above / below the object, never on it */
@media (max-aspect-ratio: 1/1) {
    :root { --gutter: 20px; }
    .cinematic-container { padding: 0 var(--gutter) 20px; }
    .hero-city { display: none; }
    #slide-1 {
        left: var(--gutter); right: var(--gutter); width: auto; top: 84px; bottom: 18px;
        justify-content: space-between; gap: 0;
    }
    .hero-head { gap: 12px; }
    .slide-title.hero-title { font-size: clamp(36px, min(11vw, 6.4vh), 84px); }
    .hero-foot { gap: 14px; justify-items: stretch; }
    .slide-desc.hero-lead { font-size: clamp(14px, 3.7vw, 18px); line-height: 1.45; max-width: none; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-actions .btn { min-height: 52px; padding: 6px 12px; font-size: 12px; letter-spacing: 0.06em; text-align: center; }
    .hero-chain { justify-content: center; font-size: 10px; letter-spacing: 0.12em; }
    .hero-chain li:not(:last-child)::after { width: 12px; margin: 0 6px 0 1px; }
    .stage-slide.slide-right, .stage-slide.slide-left {
        left: var(--gutter); right: var(--gutter); width: auto; max-width: none; justify-content: flex-start;
    }
    .stage-slide.slide-right { top: auto; bottom: 18px; }
    .stage-slide.slide-left { top: 84px; bottom: auto; }
    .slide-eyebrow { margin-bottom: 12px; font-size: 11px; }
    .slide-title.problem-title { font-size: clamp(26px, min(7.6vw, 4.6vh), 56px); margin-bottom: 16px; }
    .problem-cloud { gap: 10px 8px; padding-top: 4px; }
    .problem-cloud li { padding: 9px 12px 9px 10px; font-size: 13.5px; border-radius: 12px; }
    .slide.active .problem-cloud li { transform: none; }
    .chip-art { height: 34px; max-width: 44px; }
    .problem-cloud li:has(.chip-art) { padding: 5px 12px 5px 6px; gap: 8px; }
    .slide-title.solution-title { font-size: clamp(28px, min(8.6vw, 5vh), 64px); margin-bottom: 8px; }
    .solution-kicker { margin-bottom: 14px; font-size: clamp(16px, 4.6vw, 24px); }
    .solution-steps { gap: 7px 6px; }
    .solution-steps li { padding: 6px 10px; font-size: 13px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 900px) { .hero-chain { display: none; } }

/* ============================================================================
   The story: sections 04–12 in normal flow
   ============================================================================ */
.story { position: relative; z-index: 8; }
.sec {
    position: relative; overflow-x: clip;
    padding: clamp(80px, 8.5vw, 128px) clamp(20px, 5vw, var(--gutter));
    background: var(--bg); scroll-margin-top: 0;
}
.sec-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 6vw, 76px); }
.sec-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
    font: 600 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: #d7deea;
}
.sec-head-center .sec-eyebrow, .sec-manifesto .sec-eyebrow { justify-content: center; }
.sec-num {
    padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.22);
    letter-spacing: 0.06em; color: #ffffff; font-variant-numeric: tabular-nums;
}
.sec-title { font-size: clamp(40px, 6.2vw, 96px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 500; color: var(--ink); }
.sec-title-cta { font-size: clamp(38px, 5.4vw, 84px); }
.sec-title-xl { font-size: clamp(72px, 14vw, 210px); line-height: 0.88; letter-spacing: -0.055em; font-weight: 600; }
.sec-sub { margin-top: 20px; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.35; font-weight: 300; color: var(--text); }

/* Scroll reveal (only when JavaScript is there to undo it) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---- 04 · Signalo Citoyen ---- */
.sec-citizen { background: radial-gradient(55% 45% at 12% 28%, rgba(168, 226, 49, 0.12), transparent 70%), var(--bg); }
.citizen-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.phone-wrap { position: sticky; top: 104px; display: flex; justify-content: center; }
.phone {
    position: relative; width: min(316px, 76vw); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 46px;
    background: linear-gradient(160deg, #1b211c, #090c09); border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(168, 226, 49, 0.1), 0 0 90px rgba(168, 226, 49, 0.14);
}
.phone-notch { position: absolute; z-index: 3; top: 21px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 20px; background: #000000; }
.phone-screen {
    position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #060906;
    display: flex; flex-direction: column; gap: 11px; padding: 54px 14px 14px;
}
.ph-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.ph-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.1); }
.ph-photo svg { display: block; width: 100%; height: 100%; }
.ph-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--green), transparent); box-shadow: 0 0 12px var(--green);
}
.phone[data-step="3"] .ph-scan { animation: ph-scan 1.5s ease-in-out 2; }
@keyframes ph-scan { 0% { top: 0; opacity: 1; } 50% { top: calc(100% - 2px); opacity: 1; } 100% { top: 0; opacity: 0; } }
.ph-box { position: absolute; left: 15%; top: 32%; width: 64%; height: 54%; border: 2px solid var(--green); border-radius: 8px; opacity: 0; transform: scale(1.12); transition: opacity 0.5s, transform 0.5s var(--ease); }
.ph-box em { position: absolute; left: -2px; top: -24px; padding: 5px 7px; border-radius: 5px; background: var(--green); color: #071004; font: 700 11px/1 'Space Grotesk', sans-serif; font-style: normal; white-space: nowrap; }
.phone[data-step="3"] .ph-box, .phone[data-step="4"] .ph-box { opacity: 1; transform: none; }
.ph-rows { display: grid; gap: 8px; }
.ph-row {
    display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 12px; line-height: 1.3; color: var(--text); transition: opacity 0.5s, border-color 0.5s;
}
.ph-row .ico { width: 16px; height: 16px; color: var(--green); }
.ph-ai { opacity: 0.3; }
.phone[data-step="3"] .ph-ai, .phone[data-step="4"] .ph-ai, .phone[data-step="5"] .ph-ai { opacity: 1; border-color: rgba(168, 226, 49, 0.4); }
.ph-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.st { padding: 7px 2px; border-radius: 8px; text-align: center; font-size: 11px; line-height: 1.15; color: #7c8697; background: rgba(255, 255, 255, 0.04); transition: background 0.4s, color 0.4s; }
.phone[data-step="2"] .st-1, .phone[data-step="3"] .st-1, .phone[data-step="3"] .st-2,
.phone[data-step="4"] .st-1, .phone[data-step="4"] .st-2, .phone[data-step="5"] .st { color: #071004; background: var(--green); }
.phone[data-step="4"] .st-3 { color: #ffffff; background: var(--red); }
.ph-notif {
    position: absolute; z-index: 2; left: 22px; right: 22px; top: 96px; display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 16px; background: rgba(18, 26, 18, 0.95); border: 1px solid rgba(168, 226, 49, 0.45);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); font-size: 12px; line-height: 1.35; color: var(--text);
    opacity: 0; transform: translateY(-130%); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.ph-notif .ico { width: 24px; height: 24px; color: var(--green); }
.ph-notif strong { display: block; color: #ffffff; font-size: 13px; }
.phone[data-step="5"] .ph-notif { opacity: 1; transform: none; }
.ph-btn { margin-top: auto; padding: 13px; border-radius: 14px; text-align: center; background: var(--green); color: #071004; font-size: 13px; font-weight: 700; transition: box-shadow 0.4s, transform 0.4s; }
.phone[data-step="2"] .ph-btn { box-shadow: 0 0 0 6px rgba(168, 226, 49, 0.25); transform: scale(0.97); }
.journey { list-style: none; display: grid; gap: 14px; padding: 4vh 0; }
.journey-step {
    display: flex; align-items: flex-start; gap: 20px; padding: 24px 26px; border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.5s, background 0.5s;
}
.journey-step.is-active { border-color: rgba(168, 226, 49, 0.55); background: linear-gradient(120deg, rgba(168, 226, 49, 0.13), rgba(168, 226, 49, 0.02)); }
.j-num { flex: none; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(168, 226, 49, 0.45); color: var(--green); font: 700 14px/1 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.journey-step h3 { margin: 2px 0 6px; font-size: clamp(21px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.journey-step p { font-size: 15.5px; line-height: 1.5; color: #b9c1d1; }
.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(36px, 5vw, 56px); }
.pill-row li {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
    border: 1px solid rgba(168, 226, 49, 0.28); background: rgba(168, 226, 49, 0.06); font-size: 14.5px; color: #e3e8ef;
}
.pill-row .ico { width: 18px; height: 18px; color: var(--green); }

/* ---- 05 · L'IA ---- */
.sec-ai {
    background: radial-gradient(48% 40% at 50% 0%, rgba(168, 226, 49, 0.16), transparent 70%),
                radial-gradient(40% 40% at 88% 75%, rgba(232, 255, 176, 0.06), transparent 70%), #020302;
}
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ai-frame {
    position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 26px;
    border: 1px solid rgba(168, 226, 49, 0.28); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 70px rgba(168, 226, 49, 0.1);
}
.ai-frame > svg { display: block; width: 100%; height: 100%; }
.ai-frame::after {
    content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s; pointer-events: none;
    background-image: linear-gradient(rgba(168, 226, 49, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 226, 49, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}
.is-playing .ai-frame::after { opacity: 1; }
.ai-scanline {
    position: absolute; left: 0; right: 0; top: 0; height: 3px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--green) 20%, var(--ai) 50%, var(--green) 80%, transparent); box-shadow: 0 0 18px var(--green);
}
.is-playing .ai-scanline { animation: frame-scan 2.2s cubic-bezier(0.6, 0, 0.4, 1) 0.2s 1 both; }
@keyframes frame-scan { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } }
.ai-bbox { position: absolute; border: 2px solid var(--green); border-radius: 8px; opacity: 0; transform: scale(1.15); transition: opacity 0.5s, transform 0.5s var(--ease); }
.ai-bbox em { position: absolute; left: 6px; top: 6px; padding: 5px 7px; border-radius: 5px; background: var(--green); color: #071004; font: 700 11px/1 'Space Grotesk', sans-serif; font-style: normal; white-space: nowrap; }
.ai-bbox-1 { left: 14%; top: 31%; width: 30%; height: 36%; }
.ai-bbox-2 { left: 22%; top: 62%; width: 54%; height: 24%; }
.is-playing .ai-bbox-1 { opacity: 1; transform: none; transition-delay: 1s; }
.is-playing .ai-bbox-2 { opacity: 1; transform: none; transition-delay: 1.3s; }
.ai-chip {
    position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px;
    background: rgba(4, 7, 4, 0.9); border: 1px solid rgba(168, 226, 49, 0.55); color: var(--ai);
    font: 700 12px/1 'Space Grotesk', sans-serif; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s var(--ease);
}
.ai-chip .ico { width: 14px; height: 14px; }
.ai-chip-cat { left: 14px; bottom: 14px; }
.ai-chip-prio { right: 14px; bottom: 14px; border-color: rgba(255, 77, 85, 0.65); color: #ffc2c5; }
.ai-chip-pin { right: 14px; top: 14px; }
.is-playing .ai-chip { opacity: 1; transform: none; }
.is-playing .ai-chip-cat { transition-delay: 1.8s; }
.is-playing .ai-chip-prio { transition-delay: 2.2s; }
.is-playing .ai-chip-pin { transition-delay: 2.6s; }
.ai-frame figcaption {
    position: absolute; left: 14px; top: 14px; padding: 6px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.62);
    font: 600 11px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82);
}
.ai-pipeline { list-style: none; position: relative; display: grid; gap: 8px; }
.ai-pipeline::before, .ai-pipeline::after { content: ''; position: absolute; left: 25px; top: 30px; bottom: 30px; width: 2px; }
.ai-pipeline::before { background: rgba(255, 255, 255, 0.08); }
.ai-pipeline::after { background: linear-gradient(var(--green), var(--ai) 50%, var(--green)); transform: scaleY(0); transform-origin: top; transition: transform 3.2s cubic-bezier(0.5, 0, 0.2, 1) 0.3s; }
.is-playing .ai-pipeline::after { transform: scaleY(1); }
.ai-pipeline li {
    position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 9px 0;
    opacity: 0.38; transition: opacity 0.5s; transition-delay: calc(0.4s + var(--i) * 0.5s);
}
.is-playing .ai-pipeline li { opacity: 1; }
.ai-ico {
    position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: #090d09; border: 1px solid rgba(255, 255, 255, 0.12); color: #8b95a6;
    transition: border-color 0.5s, box-shadow 0.5s, color 0.5s; transition-delay: inherit;
}
.ai-ico .ico { width: 24px; height: 24px; }
.is-playing .ai-ico { border-color: rgba(168, 226, 49, 0.65); color: var(--green); box-shadow: 0 0 26px rgba(168, 226, 49, 0.28); }
.ai-pipeline h3 { margin-bottom: 3px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.ai-pipeline p { font-size: 14.5px; color: #aab3c2; }
.ai-out {
    padding: 7px 11px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; font-weight: 600;
    background: rgba(168, 226, 49, 0.1); color: #dbf7a6; border: 1px solid rgba(168, 226, 49, 0.32);
    opacity: 0; transform: translateX(-8px); transition: opacity 0.5s, transform 0.5s var(--ease); transition-delay: calc(0.75s + var(--i) * 0.5s);
}
.ai-out-red { background: rgba(255, 77, 85, 0.1); color: #ffc2c5; border-color: rgba(255, 77, 85, 0.38); }
.is-playing .ai-out { opacity: 1; transform: none; }

/* ---- 06 · Signalo Mairie: green fades, red takes over ---- */
.sec-mairie { background: linear-gradient(180deg, #030403 0%, #080303 50%, #0e0406 100%); }
.sec-mairie::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(50% 30% at 15% 0%, rgba(168, 226, 49, 0.1), transparent 70%),
                radial-gradient(60% 45% at 85% 80%, rgba(255, 77, 85, 0.22), transparent 70%);
}
.shot {
    overflow: hidden; border-radius: 22px; border: 1px solid rgba(255, 77, 85, 0.3); background: #0b0708;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 90px rgba(255, 77, 85, 0.12);
}
.shot-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.shot-bar i:first-child { background: var(--red); }
.shot-bar span { margin-left: 10px; font-size: 12px; letter-spacing: 0.06em; color: #aab3c2; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { padding: 13px 18px 15px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 1.45; color: #b9c1d1; }
.mairie-foot { display: flex; flex-direction: column; align-items: center; gap: clamp(32px, 4vw, 48px); margin-top: clamp(48px, 6vw, 72px); }
.neon-steps { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
.neon-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; transition-delay: calc(var(--i) * 0.12s); }
.neon-art { position: relative; z-index: 1; width: 124px; height: auto; filter: drop-shadow(0 0 22px rgba(255, 77, 85, 0.35)); }
.ns-n {
    position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -20px; border-radius: 50%;
    border: 1.5px solid var(--red); background: #160608; color: #ffffff; font-size: 13px; font-weight: 700;
}
.neon-steps h3 { margin-top: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.neon-steps p { max-width: 27ch; font-size: 15px; line-height: 1.45; color: var(--text); }
.neon-steps li:not(:last-child)::after {
    content: ''; position: absolute; top: 54px; left: calc(50% + 72px); width: calc(100% - 144px + 18px); height: 2px;
    background: linear-gradient(90deg, rgba(255, 77, 85, 0.75), rgba(255, 77, 85, 0.25));
}

/* ---- 07 · Workflow ---- */
.sec-workflow {
    background: radial-gradient(60% 40% at 50% 0%, rgba(168, 226, 49, 0.08), transparent 70%),
                radial-gradient(60% 40% at 50% 100%, rgba(255, 77, 85, 0.1), transparent 70%), #030403;
}
.flowline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 64px 20px; max-width: 1180px; margin: 0 auto; }
.fl:nth-child(6) { grid-area: 2 / 5; } .fl:nth-child(7) { grid-area: 2 / 4; } .fl:nth-child(8) { grid-area: 2 / 3; }
.fl:nth-child(9) { grid-area: 2 / 2; } .fl:nth-child(10) { grid-area: 2 / 1; }
.fl {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    opacity: 0.22; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s var(--ease); transition-delay: calc(var(--i) * 0.22s);
}
.flowline.is-playing .fl { opacity: 1; transform: none; }
.fl-green { --c: var(--green); --c-line: rgba(168, 226, 49, 0.5); --c-glow: rgba(168, 226, 49, 0.2); }
.fl-ai { --c: var(--ai); --c-line: rgba(232, 255, 176, 0.5); --c-glow: rgba(232, 255, 176, 0.16); }
.fl-red { --c: var(--red); --c-line: rgba(255, 77, 85, 0.55); --c-glow: rgba(255, 77, 85, 0.22); }
.fl-dot {
    position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px;
    background: #090d09; border: 1px solid var(--c-line); color: var(--c); box-shadow: 0 0 34px var(--c-glow);
}
.fl-dot .ico { width: 28px; height: 28px; }
.fl-n { font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.1em; color: var(--c); }
.fl strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.fl small { font-size: 14px; line-height: 1.35; color: #aab3c2; }
/* connectors: rightwards on row one, leftwards on row two, a drop between them */
.fl:nth-child(-n+4)::after, .fl:nth-child(n+7)::after {
    content: ''; position: absolute; top: 35px; left: calc(50% + 44px); width: calc(100% - 88px + 20px); height: 2px;
    background: linear-gradient(90deg, var(--c-line), rgba(255, 255, 255, 0.12));
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease-out; transition-delay: calc(var(--i) * 0.22s + 0.15s);
}
.fl:nth-child(n+7)::after { background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), var(--c-line)); transform-origin: right; }
.fl:nth-child(6)::before {
    content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 64px; margin-left: -1px;
    background: linear-gradient(var(--ai), var(--red)); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease-out; transition-delay: 1.05s;
}
.flowline.is-playing .fl::after, .flowline.is-playing .fl::before { transform: none; }
.flow-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: clamp(40px, 5vw, 64px); font-size: 13px; letter-spacing: 0.06em; color: var(--text); }
.flow-legend .lg { display: inline-flex; align-items: center; gap: 8px; }
.flow-legend .lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.lg-g::before { background: var(--green); } .lg-a::before { background: var(--ai); } .lg-r::before { background: var(--red); }

/* ---- 08 · Résolution ---- */
.sec-resolution { background: linear-gradient(180deg, #080304 0%, #030403 60%); }
.resolution-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.compare {
    --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 400 / 260; border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}
.compare-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); pointer-events: none; }
.compare-handle span {
    position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
    background: rgba(5, 8, 5, 0.9); border: 2px solid #ffffff;
}
.compare-handle span::before, .compare-handle span::after {
    content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
}
.compare-handle span::before { left: 11px; transform: rotate(45deg); }
.compare-handle span::after { right: 11px; transform: rotate(-135deg); }
.compare-range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.compare-range:focus-visible + .compare-handle, .compare:focus-within .compare-handle span { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }
.compare-tag { position: absolute; z-index: 1; top: 14px; padding: 8px 12px; border-radius: 999px; font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.tag-before { left: 14px; background: var(--red); color: #ffffff; }
.tag-after { right: 14px; background: var(--green); color: #071004; }
.case { list-style: none; position: relative; display: grid; gap: 2px; }
.case::before, .case::after { content: ''; position: absolute; left: 28px; top: 92px; bottom: 30px; width: 2px; }
.case::before { background: rgba(255, 255, 255, 0.08); }
.case::after { background: linear-gradient(var(--red), var(--ai) 45%, var(--green)); transform: scaleY(0); transform-origin: top; transition: transform 2.9s cubic-bezier(0.5, 0, 0.3, 1) 0.4s; }
.case.is-playing::after { transform: none; }
.case-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 13px 16px; border-radius: 14px;
    background: var(--red-soft); border: 1px solid rgba(255, 77, 85, 0.35); color: #ff9da1; font-size: 19px; font-weight: 600;
}
.case li:not(.case-head) {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 6px;
    font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; color: #616b7a; transition: color 0.5s; transition-delay: calc(var(--i) * 0.45s);
}
.case-dot { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3a423a; background: var(--bg); transition: inherit; transition-property: border-color, background; }
.case.is-playing li:not(.case-head) { color: var(--ink); }
.case.is-playing .case-dot { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 4px, var(--bg) 5px); }
.case.is-playing li.case-done { color: var(--green); }
.case.is-playing .case-done .case-dot { background: var(--green); box-shadow: 0 0 16px rgba(168, 226, 49, 0.6); }

/* ---- 09 · Écosystème ---- */
.sec-eco {
    background: radial-gradient(45% 40% at 22% 55%, rgba(168, 226, 49, 0.09), transparent 70%),
                radial-gradient(40% 40% at 82% 60%, rgba(255, 77, 85, 0.1), transparent 70%), #030403;
}
.eco-grid { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.eco-chain { list-style: none; position: relative; display: grid; justify-items: center; gap: 26px; }
.eco-chain::before { content: ''; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; margin-left: -1px; background: linear-gradient(var(--green), var(--ai) 35%, var(--red) 65%, var(--green)); opacity: 0.5; }
.eco-chain::after {
    content: ''; position: absolute; left: 50%; top: 24px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: #ffffff; box-shadow: 0 0 16px #ffffff, 0 0 32px var(--green); opacity: 0;
}
.eco-chain.is-playing::after { animation: eco-travel 3.6s ease-in-out 0.3s 2; }
@keyframes eco-travel { 0% { top: 24px; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: calc(100% - 34px); opacity: 0; } }
.ec {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px;
    padding: 13px 20px; border-radius: 999px; background: #070a07; border: 1px solid var(--c-line, rgba(255, 255, 255, 0.3));
    font-size: 16px; font-weight: 600; color: var(--ink);
}
.ec .ico { color: var(--c); }
.ec-green { --c: var(--green); --c-line: rgba(168, 226, 49, 0.5); }
.ec-ai { --c: var(--ai); --c-line: rgba(232, 255, 176, 0.5); }
.ec-red { --c: var(--red); --c-line: rgba(255, 77, 85, 0.5); }
.ec-brand { background: linear-gradient(160deg, rgba(168, 226, 49, 0.2), #070a07); --c-line: rgba(255, 255, 255, 0.4); }
.ec-mark { display: block; width: 20px; height: 20px; color: var(--green); }
.eco-products { display: grid; gap: 12px; }
.product {
    display: flex; align-items: flex-start; gap: 18px; padding: 24px; border-radius: 22px;
    border: 1px solid var(--c-line); background: linear-gradient(140deg, var(--c-bg), rgba(255, 255, 255, 0.015));
}
.product-ico { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; color: var(--c); border: 1px solid var(--c-line); }
.product-ico .ico { width: 24px; height: 24px; }
.product h3 { margin: 2px 0 6px; font-size: clamp(20px, 1.9vw, 24px); font-weight: 600; color: var(--ink); }
.product p { font-size: 15px; line-height: 1.5; color: var(--text); }
.p-citizen { --c: var(--green); --c-line: rgba(168, 226, 49, 0.35); --c-bg: rgba(168, 226, 49, 0.1); }
.p-ai { --c: var(--ai); --c-line: rgba(232, 255, 176, 0.3); --c-bg: rgba(232, 255, 176, 0.07); }
.p-mairie { --c: var(--red); --c-line: rgba(255, 77, 85, 0.35); --c-bg: rgba(255, 77, 85, 0.1); }
.eco-plus { justify-self: center; font-size: 22px; line-height: 1; color: #6f7888; }

/* ---- 10 · 100 % IA ---- */
.sec-manifesto { text-align: center; background: radial-gradient(45% 50% at 50% 42%, rgba(168, 226, 49, 0.17), transparent 70%), #020302; }
.manifesto-title {
    margin: 6px 0 28px; font-size: clamp(88px, 19vw, 300px); line-height: 0.86; letter-spacing: -0.06em; font-weight: 600;
    color: var(--green); background: linear-gradient(180deg, #f4ffd9 10%, var(--green) 55%, #4a7d16 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 50px rgba(168, 226, 49, 0.28));
}
.verbs { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px clamp(16px, 3vw, 44px); }
.verbs li {
    font-size: clamp(24px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.02em; text-transform: uppercase; color: #2f3730;
    transition: color 0.5s, text-shadow 0.5s; transition-delay: calc(var(--i) * 0.3s);
}
.verbs.is-playing li { color: var(--ink); }
.verbs.is-playing li:last-child { color: var(--green); text-shadow: 0 0 30px rgba(168, 226, 49, 0.5); }
.manifesto-line { max-width: 640px; margin: 36px auto 0; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--text); }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1000px; margin: clamp(40px, 6vw, 64px) auto 0; text-align: left; }
.pillars li { padding: 22px 22px 24px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025); }
.pillars strong { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 600; color: var(--ink); }
.pillars span { font-size: 15px; line-height: 1.5; color: #aab3c2; }

/* ---- 11 · Versions futures: one universe each ---- */
.versions { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ver {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 320px; padding: 24px 22px 26px;
    border-radius: 24px; border: 1px solid var(--c-line); background: var(--pattern), linear-gradient(160deg, var(--c-bg), rgba(255, 255, 255, 0.01));
}
.ver-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ver-v { font-size: 36px; font-weight: 600; letter-spacing: -0.04em; color: var(--c); }
.ver-state { padding: 7px 10px; border-radius: 999px; border: 1px dashed var(--c-line); font: 700 11px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); }
.ver-state.is-now { border-style: solid; border-color: var(--c); background: var(--c); color: #071004; }
.ver-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-top: auto; border-radius: 16px; color: var(--c); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--c-line); }
.ver-ico .ico { width: 26px; height: 26px; }
.ver h3 { margin-top: 4px; font-size: 22px; font-weight: 600; color: var(--ink); }
.ver p { font-size: 15px; line-height: 1.5; color: var(--text); }
.ver-1 { --c: var(--green); --c-line: rgba(168, 226, 49, 0.42); --c-bg: rgba(168, 226, 49, 0.13); --pattern: radial-gradient(circle at 85% 12%, rgba(168, 226, 49, 0.28), transparent 42%); }
.ver-2 { --c: #f5a524; --c-line: rgba(245, 165, 36, 0.38); --c-bg: rgba(245, 165, 36, 0.1); --pattern: radial-gradient(rgba(245, 165, 36, 0.2) 1px, transparent 1.6px) 0 0 / 14px 14px; }
.ver-3 { --c: #38bdf8; --c-line: rgba(56, 189, 248, 0.38); --c-bg: rgba(56, 189, 248, 0.1); --pattern: repeating-linear-gradient(115deg, rgba(56, 189, 248, 0.1) 0 2px, transparent 2px 22px); }
.ver-4 { --c: #a78bfa; --c-line: rgba(167, 139, 250, 0.4); --c-bg: rgba(167, 139, 250, 0.1); --pattern: repeating-radial-gradient(circle at 85% 15%, rgba(167, 139, 250, 0.16) 0 1px, transparent 1px 18px); }

/* ---- 12 · Passer à l'action + demande de démo ---- */
.contact { background: linear-gradient(180deg, var(--bg) 0%, rgba(3, 4, 3, 0.62) 18%, rgba(0, 0, 0, 0.4) 100%); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: clamp(28px, 4vw, 60px); align-items: start; }
.cta-side { display: grid; gap: 16px; }
.cta-panel {
    padding: 26px; border-radius: 24px; border: 1px solid var(--c-line);
    background: linear-gradient(150deg, var(--c-bg), rgba(255, 255, 255, 0.015));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.cta-citizen { --c: var(--green); --c-line: rgba(168, 226, 49, 0.35); --c-bg: rgba(168, 226, 49, 0.1); scroll-margin-top: 96px; }
.cta-mairie { --c: var(--red); --c-line: rgba(255, 77, 85, 0.35); --c-bg: rgba(255, 77, 85, 0.1); }
.cta-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.cta-label .ico { width: 18px; height: 18px; }
.cta-panel h3 { margin-bottom: 8px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cta-panel > p { margin-bottom: 18px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-mail { margin-top: 20px; font-size: 16px; gap: 20px; padding-bottom: 12px; }
.contact .contact-card { justify-self: stretch; max-width: none; }

.offer { padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 77, 85, 0.4); background: rgba(255, 77, 85, 0.08); }
.offer-title { margin-bottom: 8px; font: 700 12px/1 'Space Grotesk', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #ff9da1; }
.offer-sub { margin-bottom: 14px; font-size: 14.5px; line-height: 1.5; color: #e3e8ef; }
.countdown { display: flex; gap: 8px; }
.countdown div { flex: 1; max-width: 76px; padding: 11px 6px 10px; border-radius: 12px; text-align: center; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); }
.countdown span { display: block; font: 500 24px/1 'Space Grotesk', sans-serif; color: #ffffff; font-variant-numeric: tabular-nums; }
.countdown small { display: block; margin-top: 7px; font: 600 10px/1 'Space Grotesk', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa4b4; }
.offer.is-expired .countdown { display: none; }
.offer.is-expired .offer-sub { margin-bottom: 0; }

/* Demo form details */
#demoMairieForm .field-grid { gap: 22px 26px; }
#demoMairieForm .card-head { margin-bottom: 26px; }
.field select {
    width: 100%; padding: 6px 22px 12px 0; border: 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent; color: #ffffff; outline: none; -webkit-appearance: none; appearance: none;
    font: 300 16px/1.4 'Space Grotesk', sans-serif; transition: border-color 0.3s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23cfd6e6' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 2px top 14px; background-size: 11px 8px;
}
.field select:focus { border-bottom-color: #ffffff; }
.field select option { background: #0b0e0b; color: #ffffff; }
.field.is-autofilled input { border-bottom-color: rgba(168, 226, 49, 0.75); }
.field-hint { font-size: 12px; line-height: 1.5; color: #9aa4b4; }
.card-note { font-size: 12px; }
.combo { position: relative; }
.commune-suggestions {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 290px; overflow: auto;
    margin: 0; padding: 6px; list-style: none; border-radius: 14px;
    background: rgba(9, 13, 9, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}
.commune-suggestion { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 9px; font-size: 14px; color: var(--ink); }
.commune-suggestion strong { font-weight: 500; }
.commune-suggestion span { font-size: 12px; white-space: nowrap; color: #9aa4b4; }
.commune-suggestion:hover, .commune-suggestion.is-active { background: rgba(168, 226, 49, 0.13); }
.commune-suggestion-empty { padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #b3bccb; }
.form-msg { font-size: 13px; line-height: 1.5; }
.form-msg:not(:empty) { margin-top: 18px; }
.form-msg.is-error { color: #ff9da1; }
.pill-btn:disabled { opacity: 0.6; transform: none; }
.demo-confirm {
    position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px;
    background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s;
}
.demo-confirm.is-visible { opacity: 1; visibility: visible; }
.demo-confirm-box {
    max-width: 440px; padding: 38px 34px 32px; border-radius: 26px; text-align: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.demo-confirm-check { display: block; width: 72px; height: 72px; margin: 0 auto 20px; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.demo-confirm-box p { margin-bottom: 26px; font-size: 16px; line-height: 1.6; color: #e7ecf4; }

.site-footer {
    position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px;
    max-width: 1240px; margin: clamp(64px, 8vw, 110px) auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.site-footer a { color: inherit; text-decoration: none; transition: color 0.3s; }
.site-footer a:hover { color: #ffffff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ============================================================================
   Responsive: tablets and phones
   ============================================================================ */
@media (max-width: 1100px) {
    .neon-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .neon-steps li::after { display: none; }
    .versions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ver { min-height: 280px; }
}
@media (max-width: 1000px) {
    .citizen-grid, .ai-grid, .resolution-grid, .eco-grid, .cta-grid { grid-template-columns: minmax(0, 1fr); }
    .phone-wrap { position: static; }
    .journey { padding: 0; }
    .pillars { grid-template-columns: minmax(0, 1fr); }
    .eco-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .eco-chain::before, .eco-chain::after { display: none; }
    .ec { min-width: 0; width: 100%; padding: 12px 10px; font-size: 14.5px; }
    /* the workflow becomes one vertical line */
    .flowline { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 560px; }
    .fl:nth-child(n) { grid-area: auto; }
    .fl {
        display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto;
        column-gap: 18px; row-gap: 3px; align-items: center; text-align: left;
    }
    .fl-dot { grid-row: 1 / 4; width: 64px; height: 64px; border-radius: 20px; }
    .fl:nth-child(n)::after {
        content: ''; left: 31px; top: 64px; width: 2px; height: calc(100% - 64px + 18px);
        background: linear-gradient(var(--c-line), rgba(255, 255, 255, 0.1)); transform: scaleY(0); transform-origin: top;
    }
    .fl:last-child::after { display: none; }
    .fl:nth-child(6)::before { display: none; }
}
@media (max-width: 760px) {
    .neon-art { width: 100px; }
    .neon-steps p { font-size: 14px; }
    .ai-pipeline li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; }
    .ai-ico { width: 46px; height: 46px; grid-row: 1 / 3; }
    .ai-pipeline::before, .ai-pipeline::after { left: 22px; }
    .ai-out { grid-column: 2; justify-self: start; }
    .versions { grid-template-columns: minmax(0, 1fr); }
    .ver { min-height: 0; }
    .journey-step { padding: 20px; gap: 16px; }
    .eco-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compare-tag { top: 10px; padding: 7px 10px; font-size: 11px; }
    .tag-before { left: 10px; } .tag-after { right: 10px; }
}
@media (max-width: 420px) {
    .sec-title { font-size: clamp(36px, 11vw, 48px); }
    .product { padding: 20px 18px; gap: 14px; }
    .cta-panel { padding: 22px 18px; }
    .countdown span { font-size: 21px; }
    .ai-chip-pin { top: 46px; left: 14px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* Header on phones: brand, the demo call and the menu, on one line */
.contact-btn { white-space: nowrap; }
@media (max-width: 600px) {
    .header-counter { display: none; }
    .header-actions { gap: 8px; }
    .contact-btn { padding: 8px 12px; font-size: 11.5px; }
}
@media (max-width: 400px) {
    .menu-btn { width: 40px; padding: 0; justify-content: center; }
    .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Video frames (for future clips, see README): the clip owns its frame, no text on it */
.media-frame { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 9; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12); background: #050705; }
.media-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Résolution: the citizen path in neon, lit one step at a time */
.case .case-dot { display: grid; place-items: center; width: 46px; height: 41px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.case .case-dot img { display: block; width: 46px; height: auto; opacity: 0.3; filter: grayscale(1) brightness(0.8); transition: opacity 0.5s, filter 0.5s; transition-delay: inherit; }
.case.is-playing .case-dot { background: none; box-shadow: none; }
.case.is-playing .case-dot img { opacity: 1; filter: drop-shadow(0 0 8px rgba(168, 226, 49, 0.45)); }
.case.is-playing .case-dot.is-tinted img { filter: hue-rotate(95deg) saturate(1.15) brightness(1.05) drop-shadow(0 0 8px rgba(168, 226, 49, 0.45)); }
.case.is-playing .case-done .case-dot { background: none; box-shadow: none; }

/* 12 · the glass phone beside the citizen call to action */
.cta-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.cta-art { width: clamp(112px, 11vw, 168px); height: auto; filter: drop-shadow(0 0 26px rgba(168, 226, 49, 0.3)); }
@media (max-width: 480px) {
    .cta-split { grid-template-columns: minmax(0, 1fr); }
    .cta-art { order: -1; justify-self: center; width: 128px; }
}

/* Accès directs aux formulaires (pages /demonstration/ et /contact/) et erreurs par champ */
.cta-liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cta-liens .pill-btn { text-decoration: none; }
.cta-liens .pill-btn:not(.pill-btn-ghost) { background: var(--green); color: #0b0e0b; border-color: var(--green); font-weight: 600; }
.erreur-champ { color: #ff9da1; font-size: 12px; line-height: 1.4; }
.erreur-champ:empty { display: none; }
.field.a-erreur input, .field.a-erreur select { border-bottom-color: #ff9da1; }
.field-case .case-confidentialite { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #dfe6f3; }
.field-case input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); flex: none; }
.field-case a, .card-note a { color: var(--green); }
.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }