/* Fidelo / Digital dimension — surfaces graphite, accent acide, cartes en volume. */
:root {
  --color-primary:#c6f777; --color-primary-dark:#c6f777; --color-secondary:#94bd5f;
  --color-tertiary:#252d20; --color-bg:#101110; --color-white:#191b18;
  --color-text:#f2f3ec; --color-text-soft:#a6aaa0; --color-border:#30332c;
  --shadow-sm:0 2px 10px #00000016; --shadow-md:0 14px 40px #00000030; --shadow-lg:0 30px 70px #00000055;
  --radius-sm:12px; --radius-md:20px; --radius-lg:26px; --container-width:1240px;
}
body { background:#101110; font-feature-settings:'ss01'; }
::selection { background:#c6f777; color:#15210a; }
:focus-visible { outline:3px solid #c6f777; outline-offset:5px; }
button,.btn { min-height:44px; touch-action:manipulation; }
.btn { white-space:normal; border-radius:10px; font-size:.85rem; }
.btn--primary { background:#c6f777; color:#17220d; box-shadow:0 0 22px #c6f77712,inset 0 1px 0 #eaffc6; }
.btn--primary:hover { background:#d6ff99; color:#17220d; box-shadow:0 0 30px #c6f77726; }
.btn--secondary-outline { color:#eef1e5; border:1px solid #454a3f; background:#ffffff03; }
.btn--secondary-outline:hover { background:#272c22; }
.btn--ghost:hover { background:#ffffff0b; }
.header { background:#101110ed; backdrop-filter:blur(16px); border-bottom:1px solid #ffffff0c; }
.header__inner { height:86px; }
.brand { gap:10px; }
.brand__mark { border-radius:12px; background:#c6f777; color:#17220d; box-shadow:inset 0 1px 1px #fff9,0 3px 0 #556e30; transform:rotate(-7deg); }
.brand__name { font-size:1.65rem; letter-spacing:-.06em; color:#f5f6ef; }
.nav__link { font-size:.79rem; color:#adb1a5; }
.nav__link:hover { color:#c6f777; }
.mobile-menu { background:#181b16; }
.menu-toggle span { background:#f2f3ec; }
.hero { position:relative; padding:145px 0 0; overflow:hidden; background:radial-gradient(ellipse at 83% 36%,#43552622,transparent 48%); }
.hero__inner { grid-template-columns:1fr 1.08fr; gap:20px; min-height:590px; }
.hero__content { position:relative; z-index:2; }
.badge { background:#c6f77709; border:1px solid #c6f77730; color:#c6f777; font-size:.65rem; letter-spacing:.1em; padding:7px 12px; box-shadow:none; }
.badge--accent { margin-bottom:26px; }
.status-dot,.scene-live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#c6f777; box-shadow:0 0 10px #c6f77770; margin-right:7px; vertical-align:middle; }
.hero__title { font-size:clamp(3.2rem,5.2vw,4.9rem); line-height:1.07; letter-spacing:-.065em; font-weight:700; margin-bottom:26px; }
.hero__title em { font:inherit; color:#c6f777; text-shadow:0 0 60px #c6f77720; }
.hero__subtitle { font-size:1rem; line-height:1.9; max-width:425px; color:#a6aaa0; margin-bottom:30px; }
.hero__cta { gap:12px; }
.hero__cta .btn { font-size:.8rem; padding:16px 19px; }
.hero__note { font-size:.7rem; font-weight:500; color:#999e90; }
.hero__audience { margin-top:36px; }
.hero__audience > span { font-size:.53rem; letter-spacing:.12em; color:#93998a; }
.hero__audience p { margin-top:12px; font-size:.76rem; color:#d6dace; }
.hero__audience i { color:#c6f777; font-style:normal; margin:0 13px; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:55px; min-height:80px; border-top:1px solid #ffffff12; color:#858d7c; font-size:.57rem; letter-spacing:.15em; }
.hero-bottom a { display:grid; place-items:center; width:44px; height:44px; color:#c6f777; font-size:1.3rem; border:1px solid #424a35; border-radius:50%; }
/* Scène 3D native : trois cartes espacées en profondeur et éclairage de surface. */
.hero__visual { height:590px; position:relative; display:block; perspective:1100px; isolation:isolate; min-width:0; }
.scene-halo { position:absolute; width:420px; height:420px; top:45px; left:90px; background:radial-gradient(circle,#b5df6128,transparent 68%); border-radius:50%; filter:blur(18px); z-index:-1; }
.scene-grid { position:absolute; inset:10% -20% -10%; background-image:linear-gradient(#c6f77709 1px,transparent 1px),linear-gradient(90deg,#c6f77709 1px,transparent 1px); background-size:44px 44px; transform:rotateX(62deg) rotateZ(-22deg); mask-image:radial-gradient(ellipse,#000,transparent 68%); z-index:-1; }
.orbit { position:absolute; border:1px solid #bdd48520; width:550px; height:280px; border-radius:50%; left:0; top:130px; transform:rotate(-36deg); z-index:-1; }
.orbit--two { transform:rotate(-36deg) scale(.85); border-style:dashed; opacity:.55; }
.card-stack { position:absolute; width:390px; height:245px; top:120px; left:70px; transform-style:preserve-3d; transform:rotateX(var(--tilt-x,14deg)) rotateY(var(--tilt-y,-20deg)) rotateZ(-12deg); transition:transform 350ms ease-out; }
.stack-layer,.scene-card { position:absolute; inset:0; width:100%; height:100%; border-radius:23px; }
.stack-layer { border:1px solid #889274; padding:22px; box-shadow:4px 5px 0 #30352c,12px 20px 35px #0008; }
.stack-layer--back { background:linear-gradient(120deg,#363e30,#151b14); transform:translate3d(30px,-63px,-65px) rotateZ(9deg); color:#cedabe; font-size:.8rem; }
.stack-layer--middle { background:linear-gradient(115deg,#a3aa8d,#525d40); transform:translate3d(16px,-31px,-32px) rotateZ(4deg); color:#f5ffe7; font-size:.6rem; letter-spacing:.2em; }
.scene-card { padding:25px 28px; overflow:hidden; background:linear-gradient(115deg,#e0ffab 0%,#bde976 42%,#91bf51 100%); color:#1d3211; border:1px solid #efffce; box-shadow:1px 2px 0 #e5ffbe,3px 5px 0 #597c35,9px 13px 0 #223118,22px 40px 50px #0008; }
.scene-card::after { content:''; position:absolute; width:260px; height:260px; border:35px solid #f6ffdc30; border-radius:50%; right:-110px; top:-90px; pointer-events:none; }
.scene-card__shine { position:absolute; inset:0; background:linear-gradient(115deg,transparent 15%,#ffffff45 35%,transparent 56%); transform:translateX(var(--shine-x,0%)); pointer-events:none; }
.scene-card__top,.scene-card__bottom { display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; }
.scene-brand { font-size:1.08rem; font-weight:800; letter-spacing:-.04em; }
.scene-brand span { display:block; font-size:.46rem; letter-spacing:.18em; font-weight:600; margin-top:3px; }
.contactless { font-family:monospace; font-size:1.5rem; letter-spacing:-6px; transform:rotate(-6deg); padding-right:10px; }
.scene-card__headline { margin:22px 0 16px; font-size:1.38rem; line-height:1.25; letter-spacing:-.04em; font-weight:700; position:relative; z-index:1; }
.scene-card__headline em { font-style:normal; color:#395423; }
.scene-card__bottom { font-size:.55rem; letter-spacing:.13em; }
.scene-card__bottom small { display:block; font-size:.42rem; margin-top:4px; letter-spacing:.12em; }
.scene-card__symbol { font-size:2.4rem; line-height:1; }
.floating-token { position:absolute; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 25% 20%,#f5ffe0,#c3ee79 40%,#7b9f42 78%); border:1px solid #e7ffb9; color:#426022; box-shadow:3px 5px 0 #53722b,6px 10px 0 #263b16,16px 22px 25px #0007,inset -5px -6px 12px #557227; }
.token--star { width:80px; height:80px; font-size:46px; right:16px; top:38px; transform:rotate(-18deg); animation:tokenHover 7s ease-in-out infinite; }
.token--plus { width:46px; height:46px; font-size:32px; left:2px; top:306px; transform:rotate(-25deg); animation:tokenHover 6s ease-in-out infinite reverse; }
@keyframes tokenHover { 50% { translate:0 -12px; } }
.scene-progress { position:absolute; z-index:3; top:338px; left:10px; width:278px; border:1px solid #727b514f; border-radius:18px; padding:20px; background:linear-gradient(125deg,#2e3429f7,#1c211afa); box-shadow:0 18px 40px #0006,inset 0 1px 0 #ffffff0e; transform:rotate(-5deg); }
.scene-progress__heading { display:flex; justify-content:space-between; align-items:center; font-size:.66rem; margin-bottom:15px; }
.scene-progress__heading strong { font-size:1.35rem; color:#d4f89d; }
.scene-progress__heading small { color:#a3ad93; font-size:.7rem; }
.scene-progress .stamps-grid { grid-template-columns:repeat(10,1fr); gap:5px; margin-bottom:13px; }
.scene-progress .stamp { background:#3c4333; color:#202e12; border:1px solid #687452; font-size:.55rem; }
.scene-progress .stamp--filled { background:#c6f777; border-color:#d4ffa1; }
.scene-progress p { font-size:.6rem; color:#a3ad93; }
.scene-progress p strong { color:#e1e8d5; font-weight:500; }
.scene-qr { position:absolute; right:0; top:443px; display:flex; align-items:center; gap:13px; padding:14px; border:1px solid #424c36; border-radius:15px; background:#20261c; box-shadow:0 16px 35px #0005; text-align:left; transform:rotate(5deg); transition:transform 200ms; }
.scene-qr:hover { transform:rotate(0deg) translateY(-4px); }
.scene-qr canvas { width:65px; height:65px; border-radius:6px; }
.scene-qr span { font-size:.65rem; color:#a9b29e; line-height:1.65; }
.scene-qr strong { color:#edf4e2; font-weight:600; }
.scene-qr small { display:block; font-size:.5rem; color:#a9b29e; }
.finish-picker { position:absolute; top:552px; left:66px; display:flex; align-items:center; gap:5px; padding:7px 12px 7px 18px; border:1px solid #49553a; border-radius:50px; background:#1b2118; box-shadow:0 10px 30px #0004,inset 0 1px 0 #ffffff09; }
.finish-picker__label { min-width:104px; padding-right:12px; }
.finish-picker__label > span { display:block; font-size:.45rem; letter-spacing:.14em; color:#a4ae93; }
.finish-picker__label strong { display:block; font-size:.68rem; font-weight:600; margin-top:2px; }
.finish-swatch { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid transparent; transition:border-color 180ms,background 180ms; }
.finish-swatch span { width:23px; height:23px; border-radius:50%; box-shadow:inset 0 2px 3px #ffffff80,0 3px 5px #0008; transition:transform 180ms; }
.finish-swatch:hover span { transform:scale(1.13); }
.finish-swatch[aria-pressed=true] { border-color:#c3d4ac; background:#ffffff09; }
.finish-swatch[aria-pressed=true] span::after { content:'✓'; display:block; text-align:center; color:#17220d; font-size:14px; font-weight:800; line-height:23px; }
.finish-swatch--lime span { background:linear-gradient(140deg,#dfffab,#8ebc4a); }
.finish-swatch--ice span { background:linear-gradient(140deg,#e1f9ff,#75b9d6); }
.finish-swatch--rose span { background:linear-gradient(140deg,#ffe2d0,#d49387); }
.hero__visual[data-finish=ice] .scene-card { background:linear-gradient(115deg,#e4f7ff,#b1daee 42%,#78aac7); color:#173348; border-color:#e6f8ff; box-shadow:1px 2px 0 #d9f1ff,3px 5px 0 #547f9a,9px 13px 0 #223744,22px 40px 50px #0008; }
.hero__visual[data-finish=ice] .scene-card__headline em { color:#31586e; }
.hero__visual[data-finish=ice] .scene-halo { background:radial-gradient(circle,#91d9ff30,transparent 68%); }
.hero__visual[data-finish=ice] .stack-layer--middle { background:linear-gradient(115deg,#8ea9b8,#3e5e74); }
.hero__visual[data-finish=rose] .scene-card { background:linear-gradient(115deg,#ffe4d5,#eeb5a5 42%,#c18478); color:#47291f; border-color:#ffebe1; box-shadow:1px 2px 0 #ffe0d1,3px 5px 0 #945d50,9px 13px 0 #472c22,22px 40px 50px #0008; }
.hero__visual[data-finish=rose] .scene-card__headline em { color:#684237; }
.hero__visual[data-finish=rose] .scene-halo { background:radial-gradient(circle,#efb19b30,transparent 68%); }
.hero__visual[data-finish=rose] .stack-layer--middle { background:linear-gradient(115deg,#b8998b,#745046); }
/* Sections et espace professionnel */
.section { border-top:1px solid #ffffff09; padding:90px 0; }
.section__title { font-weight:600; letter-spacing:-.045em; font-size:clamp(1.8rem,3.1vw,2.7rem); }
.section--tinted { background:#151812; }
.step-card { border:1px solid #31392a; background:linear-gradient(135deg,#22271d,#171b15); box-shadow:0 4px 0 #0a0e08,0 16px 25px #0002; }
.step-card__number { color:#c6f777; font-size:2rem; background:transparent; padding:0; letter-spacing:-.06em; font-weight:500; }
.feature-card { border:1px solid #333c2b; background:linear-gradient(145deg,#242c1e,#191e16); position:relative; overflow:hidden; }
.feature-card::after { content:''; position:absolute; width:100px; height:100px; border:14px solid #c6f77706; border-radius:50%; top:-40px; right:-25px; pointer-events:none; }
.feature-card__icon { background:linear-gradient(130deg,#43552e,#26351a); border:1px solid #667b47; box-shadow:2px 4px 0 #101709,5px 8px 15px #0004; transform:rotate(-8deg); color:#ddf9b6; }
.demo-panel,.panel,.pricing-card,.testimonial-card,.auth-card { border:1px solid #343b2d; box-shadow:var(--shadow-md); }
.kpi-card { border:1px solid #30382a; }
.kpi-card__value,.mobile-card__progress,.member-id { font-variant-numeric:tabular-nums; }
.progress-pill--ready,.status-tag--ready,.advantage-item__check { color:#1d2b10; }
.cta-banner { background:radial-gradient(ellipse at top right,#577330,#1e2d15 70%); border:1px solid #566b3c; }
.cta-final { background:radial-gradient(ellipse at top right,#3d5425,#192512 70%); border-top:1px solid #4f6637; }
.cta-final__title { color:#f2f6eb; }
.cta-final__text { color:#b6c6a6; }
.cta-final .btn--primary { background:#c6f777; color:#18270c; }
.cta-final .btn--primary:hover { background:#d6ff99; }
.footer { background:#0b0e09; border-top:1px solid #293022; }
.footer a,.footer p { color:#a5b097; }
.footer .brand__name,.footer__col-title { color:#f3f6eb; }
.sidebar { background:#151912; border-color:#31392b; }
.sidebar__link.is-active { color:#c6f777; background:#29371e; }
.sidebar__icon { filter:grayscale(1); }
.dashboard__content { min-width:0; }
.workspace-banner { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid #303a27; margin-bottom:30px; padding-bottom:22px; font-size:.65rem; letter-spacing:.07em; }
.workspace-banner small { display:block; margin-top:7px; color:#a2ad94; }
.workspace-banner .btn { font-size:.72rem; }
.auth-view,.mobile-view { background:radial-gradient(ellipse at 50% 0%,#344723 0%,#11170d 60%); }
.auth-card { background:#1b2116; }
.form-group input,.search-input { color:#f0f5e7; background:#141a0f; border-color:#455437; }
.form-group input[type=color] { padding:4px; }
.phone-mockup { background:#333b2a; box-shadow:5px 8px 0 #151a10,0 30px 60px #0005; border:1px solid #667353; }
.phone-mockup__screen { background:#141a0f; }
.loyalty-card:not(.scene-card) { background:linear-gradient(140deg,#2b3920,#192214); border:1px solid #465b34; box-shadow:0 7px 0 #0d1308,0 20px 35px #0005; }
.loyalty-card__logo,.mobile-card__logo { color:#f4f7ef; border:1px solid #698557; }
.loyalty-card__reward { color:#d5f8ab; background:#2b3d1d; }
.stamp--filled { color:#f4f7ef; }
.qr-canvas { background:#fff; border-color:#fff; border-radius:4px; }
.wallet-client-heading { width:100%; max-width:420px; display:flex; justify-content:space-between; align-items:center; margin:10px 0 25px; }
.wallet-client-heading h2 { font-size:2rem; letter-spacing:-.05em; }
.wallet-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#344526; color:#d5f4b2; font-size:.7rem; font-weight:700; }
.eyebrow { color:#c2df9f; font-size:.6rem; letter-spacing:.15em; }
.mobile-card { background:linear-gradient(150deg,#28351f,#182112 60%); border:1px solid #526640; box-shadow:0 7px 0 #0b1107,0 26px 60px #0005; }
.mobile-card__brand { overflow-wrap:anywhere; }
.mobile-card__progress { margin-bottom:10px; }
.mobile-card .stamp--filled { background:#c6f777; color:#18270c; }
#mobileProgress { appearance:none; width:100%; height:5px; border:0; border-radius:4px; background:#3b4b2e; display:block; margin-bottom:25px; }
#mobileProgress::-webkit-progress-bar { background:#3b4b2e; border-radius:4px; }
#mobileProgress::-webkit-progress-value { background:#c6f777; border-radius:4px; }
#mobileProgress::-moz-progress-bar { background:#c6f777; border-radius:4px; }
#mobileRewardBtn { background:#304522; color:#e0f8c6; box-shadow:none; }
#mobileRewardBtn:disabled { opacity:1; background:#28321f; color:#a3b38f; }
.demo-disclosure { color:#abb89b; font-size:.7rem; line-height:1.7; margin:12px 0 20px; }
.wallet-dialog { margin:auto; width:min(440px,calc(100% - 32px)); max-height:calc(100dvh - 32px); border:1px solid #596f42; border-radius:24px; padding:35px 26px; text-align:center; color:#eef4e6; background:#1b2515; overflow:auto; box-shadow:0 30px 120px #0008; }
.wallet-dialog::backdrop { background:#050902cf; backdrop-filter:blur(8px); }
.wallet-dialog h2 { font-size:1.5rem; margin:12px 0; }
.wallet-dialog p { color:#acbba0; font-size:.85rem; line-height:1.8; }
.dialog-close { display:block; margin:-20px -10px 5px auto; width:44px; font-size:28px; }
#memberQrCanvas { width:264px; height:auto; margin:24px auto; background:#fff; border-radius:10px; }
.member-id { letter-spacing:.15em; font-size:.8rem; }
.dialog-actions { display:grid; gap:10px; margin-top:25px; }
.toast { background:#c6f777; color:#1c2c0e; max-width:calc(100vw - 30px); text-align:center; }
.animate-on-scroll { opacity:1; transform:none; }
@media (max-width:1100px) {
  .hero__inner { grid-template-columns:1fr 1fr; text-align:left; gap:15px; }
  .hero__content,.hero__visual { order:initial; }
  .hero__cta { justify-content:flex-start; }
  .hero__subtitle { margin-left:0; }
  .card-stack { left:25px; width:350px; height:235px; }
  .scene-card__headline { font-size:1.2rem; }
  .scene-progress { left:0; width:250px; }
  .scene-qr { right:-8px; }
  .finish-picker { left:25px; }
  .hero__title { font-size:clamp(2.7rem,5.2vw,4rem); }
}
@media (max-width:760px) {
  .header__inner { height:72px; }
  .header__actions .btn--primary { font-size:.7rem; padding:10px 14px; }
  .hero { padding-top:115px; }
  .hero__inner { grid-template-columns:1fr; gap:20px; }
  .hero__title { font-size:clamp(2.8rem,8.7vw,4.5rem); }
  .hero__subtitle { max-width:480px; font-size:.94rem; }
  .hero__audience { margin-top:25px; }
  .hero__visual { width:100%; max-width:500px; height:625px; margin:0 auto; }
  .card-stack { left:15%; width:75%; top:115px; height:225px; }
  .scene-card { padding:22px; }
  .scene-card__headline { font-size:1.2rem; }
  .scene-halo { left:0; width:100%; }
  .scene-progress { top:327px; left:4%; }
  .scene-qr { top:438px; right:3%; }
  .token--star { right:4%; top:40px; width:65px; height:65px; font-size:38px; }
  .token--plus { left:3%; top:270px; }
  .finish-picker { left:50%; top:552px; transform:translateX(-50%); }
  .hero-bottom { margin-top:0; }
  .hero-bottom > span:nth-child(2) { display:none; }
  .section { padding:65px 0; }
  .workspace-banner { flex-wrap:wrap; }
  .sidebar { position:sticky; top:0; z-index:20; }
  .mini-client-list__item { flex-wrap:wrap; gap:8px; }
}
@media (max-width:380px) {
  .container { padding:0 18px; }
  .header__actions { gap:5px; }
  .brand__name { font-size:1.3rem; }
  .hero__cta .btn { width:100%; }
  .badge { font-size:.51rem; letter-spacing:.06em; }
  .hero__title { font-size:2.65rem; }
  .hero__audience i { margin:0 7px; }
  .card-stack { width:85%; left:7%; height:207px; }
  .scene-card { padding:18px; }
  .scene-brand { font-size:.9rem; }
  .scene-card__headline { font-size:1.02rem; margin:20px 0 16px; }
  .scene-card__symbol { font-size:1.7rem; }
  .scene-progress { width:230px; top:312px; }
  .scene-qr { top:424px; }
  .mobile-card { padding:26px 18px; }
  .stamps-grid--large { gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
}