/* ══════════════════════════════════════════════════════════════
   VTComptes — landing, DA « Maybach bordeaux » (David 13/10/2026)
   Calque chargé APRÈS le CSS de la landing : il remplace les tokens ambre/cuivre
   (mêmes noms de variables) et habille les composants. Retenue : chrome réservé
   au CTA principal, aux chiffres clés et aux bordures de cartes.
   Doc : design/da-maybach-2026-public.md
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── DA « Maybach bordeaux » (David 13/10/2026) — remplace ambre/cuivre ──
     Tokens clairs ; les anciens noms (--copper…) pointent dessus pour ne pas
     toucher aux consommateurs (login/register/pSEO/landing).
     Doc : design/da-maybach-2026-public.md · contrastes AA mesurés. */
  --mb-bg:#0B0B0D;
  --mb-card:#141418;
  --mb-card-hi:#1A1A1F;
  --mb-bordeaux:#6E0F1F;            /* début du dégradé laqué */
  --mb-bordeaux-hi:#9B1B30;         /* fin du dégradé laqué */
  --mb-accent-text:#E8627A;         /* bordeaux CLAIR pour texte/liens sur noir : 6,9:1 */
  --mb-chrome:#D5D9E0;              /* chrome : chiffres clés, liserés */
  --mb-silver:#B8BCC4;              /* texte secondaire : 10:1 */
  --mb-chrome-line:rgba(205,210,220,.16);
  --mb-chrome-line-hi:rgba(235,238,244,.42);
  --mb-lacquer:linear-gradient(135deg,#6E0F1F 0%,#9B1B30 100%);
  --mb-quilt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='userSpaceOnUse' cx='32' cy='32' r='22'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='22'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' gradientUnits='userSpaceOnUse' cx='64' cy='0' r='22'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' gradientUnits='userSpaceOnUse' cx='0' cy='64' r='22'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' gradientUnits='userSpaceOnUse' cx='64' cy='64' r='22'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.075'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M32 0L64 32L32 64L0 32Z' fill='url(%23a)'/%3E%3Cpath d='M0 0H32L0 32Z' fill='url(%23b)'/%3E%3Cpath d='M64 0H32L64 32Z' fill='url(%23c)'/%3E%3Cpath d='M0 64H32L0 32Z' fill='url(%23d)'/%3E%3Cpath d='M64 64H32L64 32Z' fill='url(%23e)'/%3E%3Cpath d='M32 0L64 32L32 64L0 32Z M0 0L32 0M0 0L0 32M64 0L32 0M64 0L64 32M0 64L32 64M0 64L0 32M64 64L32 64M64 64L64 32' fill='none' stroke='%23000' stroke-opacity='.7' stroke-width='1.6'/%3E%3Cpath d='M32 4.5L59.5 32L32 59.5L4.5 32Z' fill='none' stroke='%23C9CED6' stroke-opacity='.10' stroke-width='.7' stroke-dasharray='2 2'/%3E%3Cg fill='%23C9CED6' fill-opacity='.16'%3E%3Ccircle cx='32' cy='0' r='1.4'/%3E%3Ccircle cx='32' cy='64' r='1.4'/%3E%3Ccircle cx='0' cy='32' r='1.4'/%3E%3Ccircle cx='64' cy='32' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  --bg-deep:#0B0B0D;
  --copper:#6E0F1F;
  --copper-bright:#E8627A;
  --gold:#D5D9E0;
  --cream:#F4F5F7;
  --text-1:#F4F5F7;
  --text-2:#B8BCC4;
  --text-3:#8D919A;
  --text-4:#7C808A;
  --glass:rgba(20,20,24,.72);
  --glass-strong:rgba(20,20,24,.88);
  --glass-light:rgba(205,210,220,.05);
  --border-glass:rgba(205,210,220,.13);
  --border-glass-hover:rgba(235,238,244,.38);
  --bg-indigo:rgba(155,27,48,.0);
  --bg-cyan:rgba(155,27,48,.0);
  --bg-copper:rgba(155,27,48,.0);
}
*::selection{background:var(--mb-bordeaux-hi);color:#fff}

/* Fond : cuir capitonné noir, photo pleine page (choix David 13/10/2026 — L3). Les 3 auroras floutées
   (120-140px) animées et le grain mix-blend restent supprimés : moins de coût GPU, surtout mobile. */
.aurora,.aurora-copper,.grain{display:none}
body{background:var(--mb-bg)}
/* FOND4K : cuir capitonné, 3 définitions natives (1080 / 2560 / 3840), AVIF puis WebP */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 30%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.88) 100%),url('/assets/img/maybach-cuir-m1080.webp') center/cover no-repeat,var(--mb-bg);
  background:radial-gradient(ellipse at 50% 30%,rgba(11,11,13,.30) 0%,rgba(11,11,13,.58) 60%,rgba(11,11,13,.88) 100%),image-set(url('/assets/img/maybach-cuir-m1080.avif') type("image/avif"),url('/assets/img/maybach-cuir-m1080.webp') type("image/webp")) center/cover no-repeat,var(--mb-bg)}
@media(min-width:900px){
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 26%,rgba(11,11,13,.24) 0%,rgba(11,11,13,.52) 60%,rgba(11,11,13,.84) 100%),url('/assets/img/maybach-cuir-2560.webp') center/cover no-repeat,var(--mb-bg);
  background:radial-gradient(ellipse at 50% 26%,rgba(11,11,13,.24) 0%,rgba(11,11,13,.52) 60%,rgba(11,11,13,.84) 100%),image-set(url('/assets/img/maybach-cuir-2560.avif') type("image/avif"),url('/assets/img/maybach-cuir-2560.webp') type("image/webp")) center/cover no-repeat,var(--mb-bg)}
}
@media(min-width:1920px),(min-width:900px) and (min-resolution:2dppx){
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 26%,rgba(11,11,13,.24) 0%,rgba(11,11,13,.52) 60%,rgba(11,11,13,.84) 100%),url('/assets/img/maybach-cuir-3840.webp') center/cover no-repeat,var(--mb-bg);
  background:radial-gradient(ellipse at 50% 26%,rgba(11,11,13,.24) 0%,rgba(11,11,13,.52) 60%,rgba(11,11,13,.84) 100%),image-set(url('/assets/img/maybach-cuir-3840.avif') type("image/avif"),url('/assets/img/maybach-cuir-3840.webp') type("image/webp")) center/cover no-repeat,var(--mb-bg)}
}

/* FX4K : reflet chromé sur les titres, cartes qui se soulèvent (transform/opacité/background-position seulement) */
@keyframes mxSweep{from{background-position:110% 0,0 0}to{background-position:-10% 0,0 0}}
@media(hover:hover){
  .hero h1,.section-head h2,.mb-demo-head h2{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%) 110% 0/250% 100% no-repeat,linear-gradient(180deg,#EEF0F4 0%,#A9AFBA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero h1:hover,.section-head h2:hover,.mb-demo-head h2:hover{animation:mxSweep 1.1s ease 1}
  .problem-card,.bento-cell,.price-card,.faq-item{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .problem-card:hover,.bento-cell:hover,.price-card:hover,.faq-item:hover{transform:translateY(-3px);border-color:rgba(235,238,244,.42);box-shadow:0 18px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(235,238,244,.08)}
}
@media(hover:none){
  .hero h1,.section-head h2,.mb-demo-head h2{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%) 110% 0/250% 100% no-repeat,linear-gradient(180deg,#EEF0F4 0%,#A9AFBA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mxSweep 1.4s ease .7s 1 both}
}
@media(prefers-reduced-motion:reduce){
  .hero h1,.section-head h2,.mb-demo-head h2,.hero h1:hover,.section-head h2:hover,.mb-demo-head h2:hover,.problem-card:hover,.bento-cell:hover,.price-card:hover,.faq-item:hover{animation:none !important;transition:none !important;transform:none !important}
}
/* FX4K em : le reflet traverse aussi les mots en chrome */
@media(hover:hover){.hero h1 em,.section-head h2 em{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%) 110% 0/250% 100% no-repeat,linear-gradient(180deg,#fff,#B8BCC4);-webkit-background-clip:text;background-clip:text}
.hero h1:hover em,.section-head h2:hover em{animation:mxSweep 1.1s ease 1}}
@media(prefers-reduced-motion:reduce){.hero h1:hover em,.section-head h2:hover em{animation:none !important}}
.cursor-spotlight{display:none}
.cursor-dot{background:var(--mb-chrome);box-shadow:0 0 14px rgba(155,27,48,.7)}
.cursor-dot.is-hover{background:transparent;border-color:var(--mb-chrome);box-shadow:none}

/* Navigation */
.nav{background:rgba(11,11,13,.86);border-color:var(--mb-chrome-line);border-top-color:rgba(235,238,244,.3)}
.nav-brand-mark,.logo-mark{
  color:#fff;border:1px solid transparent;
  background:var(--mb-lacquer) padding-box,linear-gradient(135deg,rgba(235,238,244,.6),rgba(235,238,244,.15)) border-box;
  box-shadow:0 6px 18px -6px rgba(155,27,48,.6),inset 0 1px 0 rgba(255,255,255,.18);
}
.nav-link-accent::after{background:var(--mb-bordeaux-hi)}

/* Boutons : laqué bordeaux + contour chrome qui accroche la lumière ; secondaire noir laqué */
.btn-primary,.nav-cta,.pricing-cta-btn,.price-badge,.price-mini-badge,.sheet-error a{
  color:#fff;border:1px solid transparent;text-shadow:0 1px 0 rgba(0,0,0,.25);
  background:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%) 130% 0/260% 100% no-repeat padding-box,
    var(--mb-lacquer) padding-box,
    linear-gradient(135deg,rgba(235,238,244,.55),rgba(235,238,244,.14) 38%,rgba(235,238,244,.5)) border-box;
  box-shadow:0 12px 32px -10px rgba(155,27,48,.6),inset 0 1px 0 rgba(255,255,255,.16);
  transition:background-position .6s ease,transform .25s,box-shadow .25s;
}
.price-badge,.price-mini-badge{box-shadow:0 6px 16px -6px rgba(155,27,48,.7)}
.btn-primary:hover,.nav-cta:hover,.pricing-cta-btn:hover{
  filter:none;transform:translateY(-1px);
  background:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%) -30% 0/260% 100% no-repeat padding-box,
    var(--mb-lacquer) padding-box,
    linear-gradient(135deg,#fff,rgba(235,238,244,.5) 40%,#fff) border-box;
  box-shadow:0 18px 42px -10px rgba(155,27,48,.75),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:active,.nav-cta:active,.pricing-cta-btn:active{transform:translateY(0);box-shadow:0 4px 14px -6px rgba(155,27,48,.7),inset 0 2px 6px rgba(0,0,0,.35)}
.btn-ghost{
  color:var(--cream);border:1px solid transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(180deg,#1A1A1F,#0F0F12) padding-box,linear-gradient(135deg,rgba(235,238,244,.42),rgba(235,238,244,.1) 40%,rgba(235,238,244,.36)) border-box;
}
.btn-ghost:hover{background:linear-gradient(180deg,#1E1E24,#121216) padding-box,linear-gradient(135deg,#fff,rgba(235,238,244,.4) 40%,#fff) border-box}

/* Mots forts et chiffres clés : chrome avec léger reflet */
.hero h1 em,.hero-kicker em,.section-head h2 em,.trust-item .num,.price-amount{
  background:linear-gradient(180deg,#fff 0%,var(--mb-chrome) 48%,#9AA0AB 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* Cartes : noir laqué + liseré chrome, reflet sur l'arête haute */
.problem-card,.bento-cell,.price-card,.faq-item,.ambiance-glass,.workflow-visual,.mockup-frame,.price-card-mini,.problem-card-mini,.bento-card-mini{
  background:linear-gradient(180deg,rgba(26,26,31,.94),rgba(15,15,18,.96));
  border:1px solid var(--mb-chrome-line);border-top-color:rgba(235,238,244,.3);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
}
.price-card.featured,.price-card.is-featured{border-color:var(--mb-chrome-line-hi)}

/* ── Aperçu du tableau de bord ───────────────────────────── */
.mb-demo{position:relative;padding:72px 0 56px}
.mb-demo-head{text-align:center;max-width:680px;margin:0 auto 36px}
.mb-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;margin-bottom:16px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mb-silver);border:1px solid var(--mb-chrome-line);background:rgba(20,20,24,.8);
}
.mb-chip svg{color:var(--mb-accent-text)}
.mb-demo-head h2{font-weight:800;font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em;line-height:1.08;color:var(--cream);margin-bottom:14px}
.mb-demo-head p{color:var(--mb-silver);font-size:17px;line-height:1.55}
.mb-hint{display:inline-flex;align-items:center;gap:6px;color:var(--mb-accent-text);font-size:14px;margin-left:4px;white-space:normal}

.mb-demo-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){
  .mb-demo-grid{grid-template-columns:5fr 7fr;grid-template-rows:auto auto}
  .mb-roi{grid-row:1 / span 2}
}
.mb-card{
  position:relative;border-radius:16px;padding:24px;
  background:linear-gradient(180deg,rgba(26,26,31,.95),rgba(15,15,18,.97));
  border:1px solid var(--mb-chrome-line);border-top-color:rgba(235,238,244,.32);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07);
}
.mb-card-t{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mb-silver);margin-bottom:14px}
.mb-roi{display:flex;flex-direction:column}
.mb-big{
  appearance:none;border:0;background:none;cursor:pointer;text-align:left;padding:0;margin:6px 0 4px;
  font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(64px,13vw,104px);line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 0%,var(--mb-chrome) 45%,#8F95A1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 24px rgba(155,27,48,.35));
}
.mb-big span{font-size:.5em;font-weight:700;letter-spacing:0}
.mb-big:focus-visible,.mb-seg:focus-visible,.mb-pt:focus-visible .mb-dot,.mb-ring:focus-visible{outline:2px solid var(--mb-chrome);outline-offset:4px;border-radius:6px}
.mb-sub{color:var(--mb-silver);font-size:15px;margin-bottom:26px}
.mb-stack{display:flex;gap:3px;height:34px;margin-bottom:16px}
.mb-seg{appearance:none;border:0;cursor:pointer;height:100%;padding:0;border-radius:6px;transition:transform .2s,filter .2s}
.mb-seg-1{flex:59;background:linear-gradient(180deg,#3A3C44,#25262C)}
.mb-seg-2{flex:15;background:linear-gradient(180deg,#8A8F9A,#5C606A)}
.mb-seg-3{flex:85;background:var(--mb-lacquer);box-shadow:0 0 0 1px rgba(235,238,244,.35) inset}
.mb-seg:hover,.mb-seg.is-open{filter:brightness(1.25);transform:translateY(-2px)}
.mb-legend{list-style:none;display:grid;gap:10px}
.mb-legend li{display:flex;align-items:center;gap:10px;color:var(--mb-silver);font-size:14px}
.mb-legend b{margin-left:auto;color:var(--cream);font-variant-numeric:tabular-nums;font-weight:700}
.mb-k{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.mb-k1{background:#3A3C44;box-shadow:0 0 0 1px rgba(235,238,244,.2) inset}
.mb-k2{background:#8A8F9A}
.mb-k3{background:var(--mb-lacquer)}
.mb-k4{background:var(--mb-lacquer)}
.mb-k5{background:#B8BCC4}

.mb-chart{width:100%;max-width:760px;height:auto;display:block;overflow:visible;margin:0 auto}
.mb-grid line{stroke:rgba(205,210,220,.1);stroke-width:1;stroke-dasharray:3 5}
.mb-axis text{fill:var(--text-3);font-family:'JetBrains Mono',monospace;font-size:10.5px}
.mb-pt{cursor:pointer;outline:none}
.mb-hit{fill:transparent}
.mb-dot{fill:var(--mb-bg);stroke:var(--mb-chrome);stroke-width:2;transition:r .15s,fill .15s}
.mb-pt:hover .mb-dot,.mb-pt.is-open .mb-dot{r:7;fill:var(--mb-bordeaux-hi)}
.mb-pt-last .mb-dot{fill:var(--mb-bordeaux-hi);stroke:#fff}

.mb-split-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.mb-donut{width:168px;height:168px;flex-shrink:0;display:block;margin-inline:auto}
.mb-ring-bg{fill:none;stroke:rgba(205,210,220,.08);stroke-width:20}
.mb-ring{fill:none;stroke-width:20;cursor:pointer;outline:none;transition:stroke-width .2s,filter .2s}
.mb-ring-uber{stroke:#9B1B30}
.mb-ring-bolt{stroke:#B8BCC4}
.mb-ring:hover,.mb-ring.is-open{stroke-width:25;filter:brightness(1.2)}
.mb-d-num{fill:#fff;font-family:'Inter',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.mb-d-lbl{fill:var(--mb-silver);font-family:'Inter',sans-serif;font-size:11px}
.mb-legend-v{flex:1;min-width:140px}

.mb-demo-note{text-align:center;color:var(--text-3);font-size:13px;margin:22px 0 18px}
.mb-demo-cta{display:flex;justify-content:center}

/* Bulle d'explication */
.mb-tip{
  position:absolute;z-index:30;max-width:min(300px,86vw);padding:12px 14px;border-radius:10px;
  font-size:14px;line-height:1.45;color:#fff;pointer-events:none;
  background:linear-gradient(180deg,#22222A,#16161B);border:1px solid var(--mb-chrome-line-hi);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.9);
}
.mb-tip[hidden]{display:none}
.mb-tip::after{
  content:'';position:absolute;left:var(--mb-arrow,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;
  background:#16161B;border-right:1px solid var(--mb-chrome-line-hi);border-bottom:1px solid var(--mb-chrome-line-hi);transform:rotate(45deg);
}
.mb-tip.is-below::after{bottom:auto;top:-6px;transform:rotate(225deg)}

@media (max-width:640px){
  .mb-demo{padding:52px 0 40px}
  .mb-card{padding:20px 18px}
  .mb-demo-cta .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.btn-primary,.nav-cta,.mb-seg,.mb-ring{transition:none}}

/* Nav : une ligne même avec 8 entrées */
.nav-links a,.nav-cta{white-space:nowrap}
@media (max-width:1340px) and (min-width:901px){.nav{padding:10px 14px 10px 18px}.nav-links a{padding:8px 8px;font-size:13px}.nav-links{gap:0}.nav-brand{font-size:17px}.nav-cta{padding:9px 14px;font-size:13px}}
/* Aperçu : roi + donut en haut, tendance pleine largeur dessous */
@media (min-width:900px){
  .mb-demo-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .mb-roi{grid-row:auto}
  .mb-trend{grid-column:1 / -1;order:3}
  .mb-split{display:flex;flex-direction:column}
  .mb-split-row{flex:1}
}

/* FAQ : pas de cercle autour du "?" */
.faq-orb,.faq-orb:hover{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;width:auto;height:auto;margin-bottom:12px}

/* Ancres : le titre ne passe pas sous la barre fixe */
#video,#mbVideoTitle,#apercu,#mbDemoTitle,#problem,#simulator,#workflow,#features,#fleets,#pricing,#faq{scroll-margin-top:128px}
@media (max-width:900px){#video,#mbVideoTitle,#apercu,#mbDemoTitle,#problem,#simulator,#workflow,#features,#fleets,#pricing,#faq{scroll-margin-top:128px}}