/* ==========================================================================
   VISUAL DIALOGSCRIPT 7 "Renaissance" — Landing (frontend-design applied)
   Direction : hero sombre spectaculaire (effet WOW, mesh anime 4 couleurs VDS)
   + corps CLAIR premium + fenetres de code FIDELES a l'IDE reel (fond blanc,
   vraie coloration syntaxique VDS depuis synvds.pas).
   ========================================================================== */

:root {
  /* Couleurs de marque (icone VDS : bleu / rouge / vert / ambre) */
  --vds-blue:   #2563eb;
  --vds-red:    #e01b1b;
  --vds-green:  #16a34a;
  --vds-amber:  #f5a623;
  --vds-cyan:   #38bdf8;
  --vds-ink:    #0b1020;
  --vds-night:  #070a14;
  --vds-paper:  #f7f9fc;
  --vds-fg:     #131a2b;
  --vds-muted:  #5a6781;
  --vds-line:   #e4e9f2;

  /* Coloration syntaxique REELLE de l'IDE VDS (synvds.pas — valeurs Delphi fideles) */
  --syn-cmd:     #000000;   /* command/function : clBlack gras */
  --syn-var:     #ff0000;   /* %variable : clRed */
  --syn-str:     #0000ff;   /* "string" + params barewords (identifier) : clBlue */
  --syn-num:     #ff00ff;   /* nombre : clFuchsia */
  --syn-label:   #000080;   /* :label : clNavy gras */
  --syn-comment: #2e9e2e;   /* # commentaire : vert (clLime adouci pour lisibilite sur blanc) */
}

/* ---- Header : translucide, s'adapte au hero sombre ----------------------- */
.site-header { background: rgba(8,11,20,.55); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(16px) saturate(150%); }
.site-header__wordmark { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; color:#fff; font-size:1.1rem; }
/* "Script" en cyan vif uni : lisible sur tous les fonds sombres (header + footer) */
.vds-acc { color:var(--vds-cyan); }

/* Bloc marque footer (meme charte que le header) */
.site-footer__brand { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.site-footer__brand img { display:block; border-radius:7px; }
.site-footer__brand .wm { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:1.15rem; color:#fff; }
.site-header__nav a, .site-header__nav summary { color:rgba(255,255,255,.72); font-weight:600; }
.site-header__nav a:hover { color:#fff; }
.site-header__icon { color:rgba(255,255,255,.72); }
.site-header__icon:hover { color:var(--vds-cyan); }
.site-header__buy { display:inline-flex; align-items:center; font-family:var(--font-sans); font-weight:700; font-size:.92rem; color:#06121f; background:linear-gradient(95deg,var(--vds-cyan),var(--vds-blue)); padding:.55rem .95rem; border-radius:9px; text-decoration:none; transition:.18s ease; box-shadow:0 8px 22px -10px rgba(56,189,248,.7); }
.site-header__buy:hover { transform:translateY(-1px); filter:brightness(1.07); }
@media (max-width:720px){ .site-header__buy{ display:none } }
/* sélecteur de langue (menu déroulant 7 langues) */
.site-header__langmenu { position:relative; }
.site-header__langmenu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; color:rgba(255,255,255,.78); font-size:.82rem; font-weight:600; border:1px solid rgba(255,255,255,.16); padding:.4rem .6rem; border-radius:99px; }
.site-header__langmenu > summary::-webkit-details-marker { display:none; }
.site-header__langmenu > summary:hover { color:#fff; border-color:var(--vds-cyan); }
.site-header__lang-cur { max-width:8ch; }
.site-header__langmenu[open] .site-header__lang-chev { transform:rotate(180deg); }
.site-header__lang-list { position:absolute; right:0; top:calc(100% + 8px); z-index:200; min-width:172px; list-style:none; margin:0; padding:.4rem; background:var(--vds-ink); border:1px solid var(--vds-line); border-radius:12px; box-shadow:0 24px 50px -18px rgba(0,0,0,.7); display:grid; gap:2px; }
.site-header__lang-list a { display:block; padding:.5rem .7rem; border-radius:8px; text-decoration:none; color:rgba(255,255,255,.82); font-size:.92rem; }
.site-header__lang-list a:hover { background:rgba(255,255,255,.06); color:#fff; }
.site-header__lang-list a.is-active { color:var(--vds-cyan); font-weight:700; }
@media (max-width:560px){ .site-header__lang-cur{ display:none } }

/* ---- Wrapper page (corps CLAIR) ----------------------------------------- */
.vds { --maxw:1180px; background:var(--vds-paper); color:var(--vds-fg); font-family:var(--font-sans); position:relative; overflow-x:clip; }
.vds h1, .vds h2, .vds-h1, .vds-phero h1, .vds-pd__title, .vds-sec__title, .vds-shopcard h3 { overflow-wrap:break-word; word-break:break-word; }
.vds-prose pre, .vds-win, .vds-code { max-width:100%; }
.vds-hero, .vds-phero, .vds-prosewrap, .vds-sec, .vds-pd, .vds-final, .vds-trust, .vds-pagecta { overflow-x:clip; }

@media (max-width:600px){
  .vds__wrap { padding-left:16px; padding-right:16px; }
  .vds-phero h1 { font-size:clamp(1.85rem,8vw,2.6rem); }
  .vds-h1 { font-size:clamp(2.1rem,9vw,3rem); }
  .vds-sec__title, .vds-pd__title, .vds-final h2 { font-size:clamp(1.6rem,7vw,2.2rem); }
  .vds-hero__grid, .vds-pd__grid, .vds-split { gap:24px; }
}
.vds__wrap { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ==========================================================================
   HERO — sombre, mesh anime multicolore, effet WOW
   ========================================================================== */
.vds-hero { position:relative; background:var(--vds-night); color:#fff; overflow:clip; padding: clamp(70px,11vw,150px) 0 clamp(60px,8vw,120px); margin-top:-1px; }
/* mesh anime : 4 blobs aux couleurs VDS qui derivent lentement */
.vds-hero__bg { position:absolute; inset:-20% -10%; z-index:0; filter:blur(70px); opacity:.55; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 28%, var(--vds-blue), transparent 60%),
    radial-gradient(34% 40% at 82% 22%, var(--vds-red),  transparent 62%),
    radial-gradient(40% 44% at 72% 80%, var(--vds-green), transparent 60%),
    radial-gradient(34% 40% at 25% 78%, var(--vds-amber), transparent 62%);
  animation: vds-mesh 18s ease-in-out infinite alternate;
}
@keyframes vds-mesh {
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(2%,-2%,0) scale(1.08) rotate(2deg); }
  100% { transform:translate3d(-2%,2%,0) scale(1.04) rotate(-2deg); }
}
/* fine grille par-dessus le mesh */
.vds-hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 56px,
              linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/56px 100%;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%); }
.vds-hero .vds__wrap { z-index:3; }
.vds-hero__grid { display:grid; grid-template-columns:1.02fr 1.05fr; gap:clamp(30px,4vw,60px); align-items:center; }
@media (max-width:960px){ .vds-hero__grid{ grid-template-columns:1fr; } }

.vds-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.vds-badge { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:#dbe6ff; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); padding:.34rem .6rem; border-radius:99px; }
.vds-badge b { color:#fff; }
.vds-badge--new { color:#06121f; background:linear-gradient(95deg,var(--vds-cyan),var(--vds-blue)); border-color:transparent; font-weight:700; }

.vds-h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(2.7rem,6vw,5rem); line-height:.96; margin:0; color:#fff; }
.vds-h1 .grad { background:linear-gradient(95deg,#fff 10%,var(--vds-cyan) 55%,var(--vds-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vds-lead { color:#aebcd6; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; max-width:40ch; margin:1.4rem 0 0; }
.vds-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.vds-btn { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-family:var(--font-sans); padding:.95rem 1.4rem; border-radius:12px; text-decoration:none; font-size:1rem; transition:.18s cubic-bezier(.2,.7,.3,1); border:1px solid transparent; }
.vds-btn--primary { color:#06121f; background:linear-gradient(95deg,var(--vds-cyan),var(--vds-blue)); box-shadow:0 12px 34px -10px rgba(56,189,248,.65); }
.vds-btn--primary:hover { transform:translateY(-2px); box-shadow:0 18px 46px -10px rgba(56,189,248,.8); }
.vds-btn--ghost { color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.vds-btn--ghost:hover { border-color:var(--vds-cyan); background:rgba(56,189,248,.12); }
.vds-cta__note { font-family:var(--font-mono); font-size:.8rem; color:#7e8db0; margin-top:1rem; }
.vds-hero__sig { margin-top:.6rem; font-family:var(--font-display); font-weight:600; font-size:clamp(1rem,1.4vw,1.18rem); letter-spacing:-.01em; color:#dce9ff; }

/* ---- Section souveraineté / IA (contraste location vs propriété) ---------- */
.vds-sov__grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(28px,4vw,44px); align-items:start; }
@media (max-width:760px){ .vds-sov__grid{ grid-template-columns:1fr; } }
.vds-sov__col { border:1px solid var(--vds-line); border-radius:16px; padding:1.7rem; background:#fff; }
.vds-sov__col--them { background:#f3f4f7; border-color:#e3e6ec; }
.vds-sov__col--vds { border-color:transparent; box-shadow:0 0 0 2px var(--vds-blue), 0 26px 54px -30px rgba(37,99,235,.45); }
.vds-sov__head { font-family:var(--font-display); font-weight:800; font-size:1.12rem; margin:0 0 1.1rem; letter-spacing:-.01em; }
.vds-sov__col--them .vds-sov__head { color:#8a93a3; }
.vds-sov__col--vds .vds-sov__head { color:var(--vds-blue); }
.vds-sov__col ul { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.vds-sov__col li { display:flex; gap:.6rem; align-items:flex-start; font-size:1rem; line-height:1.45; }
.vds-sov__col li svg { flex:0 0 auto; margin-top:.18rem; }
.vds-sov__col--them li { color:#6f7787; }
.vds-sov__col--them li svg { color:#c0414c; }
.vds-sov__col--them strong { color:#5a6273; }
.vds-sov__col--vds li { color:var(--vds-fg); }
.vds-sov__col--vds li svg { color:var(--vds-green); }
.vds-sov__col--vds strong { color:var(--vds-blue); }
.vds-sov__recon { text-align:center; max-width:58ch; margin:clamp(28px,4vw,44px) auto 0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.3; letter-spacing:-.02em; color:var(--vds-fg); }
.vds-sov__recon::before { content:""; display:block; width:42px; height:3px; margin:0 auto 1.2rem; border-radius:3px; background:linear-gradient(90deg,var(--vds-blue),var(--vds-cyan)); }

/* corps clair : versions sombres des boutons pour sections claires */
.vds-sec .vds-btn--ghost { color:var(--vds-fg); border-color:var(--vds-line); background:#fff; }
.vds-sec .vds-btn--ghost:hover { border-color:var(--vds-blue); color:var(--vds-blue); background:#fff; }

/* ---- WOW : scene "code -> application" ----------------------------------- */
.vds-scene { position:relative; }
/* fenetre de CODE — fidele a l'IDE VDS (fond blanc) */
.vds-win { border-radius:12px; border:1px solid rgba(255,255,255,.14); background:#fff; box-shadow:0 50px 110px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(56,189,248,.18); overflow:hidden; }
.vds-win__bar { display:flex; align-items:center; gap:.45rem; padding:.6rem .8rem; background:#eef1f6; border-bottom:1px solid #dde3ee; }
.vds-win__dot { width:11px; height:11px; border-radius:99px; }
.vds-win__title { margin-left:.5rem; font-family:var(--font-mono); font-size:.76rem; color:#67718a; }
.vds-code { margin:0; padding:1rem 1.15rem; font-family:var(--font-mono); font-size:.85rem; line-height:1.6; overflow-x:auto; background:#fff; color:var(--syn-cmd); tab-size:2; }
.vds-code .k { color:var(--syn-cmd); font-weight:700; }   /* command */
.vds-code .f { color:var(--syn-cmd); font-weight:700; }   /* @function */
.vds-code .v { color:var(--syn-var); }                    /* %var */
.vds-code .s { color:var(--syn-str); }                    /* "string"/param */
.vds-code .n { color:var(--syn-num); }                    /* number */
.vds-code .l { color:var(--syn-label); font-weight:700; } /* :label */
.vds-code .c { color:var(--syn-comment); font-style:italic; } /* comment */
.vds-code .d { color:var(--syn-var); font-weight:700; }       /* directive #DEFINE */
.vds-cursor { display:inline-block; width:8px; height:1.05em; vertical-align:-2px; background:var(--vds-blue); animation:vds-blink 1.05s steps(1) infinite; }
@keyframes vds-blink { 50%{ opacity:0 } }

/* fenetre RESULTAT — un vrai dialog Windows VDS qui "pop" (le WOW) */
.vds-dlg { position:absolute; right:-10px; bottom:-32px; width:248px; border-radius:8px; overflow:hidden; border:1px solid #b9c2d6;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.65); background:#f0f0f0; transform-origin:bottom right;
  animation: vds-pop .7s cubic-bezier(.2,1.3,.4,1) 1.1s both; }
@keyframes vds-pop { from{ opacity:0; transform:scale(.6) translateY(20px) } to{ opacity:1; transform:none } }
.vds-dlg__bar { display:flex; align-items:center; justify-content:space-between; padding:.4rem .6rem; background:linear-gradient(180deg,#2f6bdf,#1d4ed8); color:#fff; font-size:.78rem; font-weight:600; }
.vds-dlg__x { width:16px;height:16px;display:grid;place-items:center;background:#e6e6e6;color:#333;border-radius:3px;font-size:.7rem; }
.vds-dlg__body { padding:.9rem .8rem 1rem; }
.vds-dlg__body label { display:block; font-size:.74rem; color:#333; margin:.1rem 0 .25rem; }
.vds-dlg__row { display:flex; gap:.4rem; }
.vds-dlg__in { flex:1; border:1px solid #9aa6bd; background:#fff; border-radius:3px; padding:.3rem .45rem; font-family:var(--font-mono); font-size:.74rem; color:#111; }
.vds-dlg__btn { margin-top:.8rem; width:100%; padding:.45rem; border:0; border-radius:4px; background:linear-gradient(180deg,#3f7bef,#2563eb); color:#fff; font-weight:700; font-size:.8rem; cursor:default; }
.vds-run { position:absolute; left:50%; top:42%; transform:translate(-60%,-50%); z-index:4; display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.72rem; color:#fff; background:rgba(7,10,20,.7); border:1px solid rgba(255,255,255,.2); padding:.3rem .55rem; border-radius:99px;
  animation: vds-runpulse 2s ease-in-out .6s infinite; }
@keyframes vds-runpulse { 0%,100%{ opacity:.85 } 50%{ opacity:1; box-shadow:0 0 18px rgba(56,189,248,.5) } }

/* ---- Reveal staggered (WOW au chargement) -------------------------------- */
@keyframes vds-rise { from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.vds [data-rise]{ opacity:0; animation:vds-rise .75s cubic-bezier(.2,.7,.3,1) forwards; }
.vds [data-rise="1"]{animation-delay:.05s}.vds [data-rise="2"]{animation-delay:.16s}
.vds [data-rise="3"]{animation-delay:.27s}.vds [data-rise="4"]{animation-delay:.4s}
.vds [data-rise="5"]{animation-delay:.52s}.vds [data-rise="6"]{animation-delay:.64s}
@media (prefers-reduced-motion:reduce){ .vds [data-rise],.vds-dlg,.vds-hero__bg{ animation:none!important; opacity:1!important } }

/* ---- Trust bar (sur le sombre, en bas du hero) --------------------------- */
.vds-trust { background:var(--vds-night); color:#fff; padding:6px 0 56px; }
.vds-trust__label { text-align:center; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#6f7d9e; }
.vds-trust__row { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 2.4rem; margin-top:1.1rem; }
.vds-trust__row span { font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#56657e; transition:.2s; }
.vds-trust__row span:hover { color:#cdd8ee; }

/* ==========================================================================
   CORPS CLAIR — sections
   ========================================================================== */
.vds-sec { position:relative; padding:clamp(56px,7vw,104px) 0; }
.vds-sec--alt { background:#fff; border-top:1px solid var(--vds-line); border-bottom:1px solid var(--vds-line); }
.vds-sec__eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vds-blue); }
.vds-sec__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; margin:.55rem 0 0; max-width:20ch; color:var(--vds-fg); }
.vds-sec__sub { color:var(--vds-muted); font-size:1.08rem; line-height:1.55; max-width:54ch; margin:1rem 0 0; }

/* code window claire dans le corps : ombre douce */
.vds-sec .vds-win { box-shadow:0 30px 60px -28px rgba(15,30,70,.35); border-color:var(--vds-line); }

/* ---- Bento --------------------------------------------------------------- */
.vds-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(28px,4vw,48px); }
.vds-bento .card--wide{ grid-column:span 2; }
@media (max-width:820px){ .vds-bento{ grid-template-columns:1fr 1fr } .vds-bento .card--wide{ grid-column:span 2 } }
@media (max-width:540px){ .vds-bento{ grid-template-columns:1fr } .vds-bento .card--wide{ grid-column:span 1 } }
.vds-card { position:relative; border:1px solid var(--vds-line); border-radius:14px; padding:1.4rem; background:#fff; transition:.22s cubic-bezier(.2,.7,.3,1); overflow:hidden; }
.vds-card::after { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--vds-blue),var(--vds-cyan)); opacity:0; transition:.22s; }
.vds-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px -24px rgba(20,40,90,.3); border-color:#cdd8ee; }
.vds-card:hover::after{ opacity:1; }
.vds-card__ico { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; color:var(--vds-blue); background:rgba(37,99,235,.08); margin-bottom:1rem; }
.vds-card h3 { font-family:var(--font-display); font-weight:700; font-size:1.18rem; margin:0 0 .4rem; letter-spacing:-.01em; color:var(--vds-fg); }
.vds-card p { color:var(--vds-muted); font-size:.96rem; line-height:1.55; margin:0; }
.vds-card .big { font-family:var(--font-display); font-weight:800; font-size:2.6rem; line-height:1; background:linear-gradient(95deg,var(--vds-blue),var(--vds-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- Multi-OS / compilation --------------------------------------------- */
.vds-os { background:linear-gradient(180deg,#fff,var(--vds-bg,#f4f6fb)); border-top:1px solid var(--vds-line); }
.vds-os__flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(18px,3vw,40px); margin-top:clamp(30px,4vw,52px); }
.vds-os__source { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1.5rem 1.7rem; border:1px solid var(--vds-line); border-radius:16px; background:#fff; box-shadow:0 22px 50px -30px rgba(20,40,90,.35); min-width:180px; }
.vds-os__ico { display:grid; place-items:center; width:52px; height:52px; border-radius:13px; color:var(--vds-blue); background:rgba(37,99,235,.08); }
.vds-os__src-label { font-family:var(--font-display); font-weight:700; color:var(--vds-fg); font-size:1.02rem; }
.vds-os__source code { font-family:var(--font-mono); font-size:.82rem; color:var(--vds-blue); background:rgba(37,99,235,.07); padding:.18rem .5rem; border-radius:7px; }
.vds-os__arrow { display:flex; flex-direction:column; align-items:center; gap:.35rem; color:var(--vds-blue); }
.vds-os__arrow span { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--vds-muted); }
.vds-os__targets { display:flex; flex-direction:column; gap:.7rem; }
.vds-os__chip { display:flex; align-items:center; gap:.65rem; padding:.7rem 1.1rem; border-radius:12px; font-family:var(--font-display); font-weight:700; font-size:1rem; }
.vds-os__chip.is-on { color:var(--vds-fg); background:#fff; border:1px solid #cdd8ee; box-shadow:0 14px 34px -24px rgba(20,40,90,.4); }
.vds-os__chip.is-on svg { color:var(--vds-blue); }
.vds-os__chip.is-soon { color:var(--vds-muted); border:1px dashed var(--vds-line); background:transparent; font-weight:600; font-size:.92rem; }
.vds-os__slogan { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.2; color:var(--vds-fg); text-align:center; max-width:24ch; margin:clamp(34px,4vw,52px) auto 0; }
.vds-os__points { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,30px); margin-top:clamp(30px,4vw,48px); }
.vds-os__pt h3 { font-family:var(--font-display); font-weight:700; font-size:1.08rem; margin:0 0 .4rem; color:var(--vds-fg); letter-spacing:-.01em; }
.vds-os__pt p { color:var(--vds-muted); font-size:.95rem; line-height:1.55; margin:0; }
@media (max-width:760px){ .vds-os__arrow svg{ transform:rotate(90deg) } .vds-os__points{ grid-template-columns:1fr; gap:18px } }

/* ---- Split langage ------------------------------------------------------- */
.vds-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; }
@media (max-width:880px){ .vds-split{ grid-template-columns:1fr } }
.vds-list { list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.8rem; }
.vds-list li { display:flex; gap:.7rem; color:var(--vds-fg); font-size:1.02rem; }
.vds-list svg { flex:0 0 auto; color:var(--vds-green); margin-top:.15rem; }

/* ---- Pricing ------------------------------------------------------------- */
.vds-prod { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; margin-top:clamp(28px,4vw,48px); align-items:stretch; }
@media (max-width:880px){ .vds-prod{ grid-template-columns:1fr } }
.vds-price { position:relative; border:1px solid var(--vds-line); border-radius:16px; padding:1.7rem; background:#fff; display:flex; flex-direction:column; }
.vds-price--feat { border-color:transparent; box-shadow:0 0 0 2px var(--vds-blue), 0 30px 60px -28px rgba(37,99,235,.4); }
.vds-price__tag { position:absolute; top:-12px; left:1.7rem; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:linear-gradient(95deg,var(--vds-blue),var(--vds-cyan)); padding:.28rem .65rem; border-radius:6px; font-weight:700; }
.vds-price h3 { font-family:var(--font-display); font-weight:800; font-size:1.4rem; margin:.2rem 0; color:var(--vds-fg); }
.vds-price__desc { color:var(--vds-muted); font-size:.95rem; line-height:1.5; min-height:3em; }
.vds-price__amt { font-family:var(--font-display); font-weight:800; font-size:2.7rem; margin:1rem 0 .2rem; color:var(--vds-fg); }
.vds-price__ht { font-family:var(--font-mono); font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vds-muted); margin-left:.5rem; vertical-align:.5rem; }
.vds-pd__vatnote { margin:.35rem 0 0; font-size:.82rem; color:var(--vds-muted); }
.vds-legalnote { margin:0 0 1.6rem; padding:.7rem 1rem; font-size:.85rem; line-height:1.5; color:var(--vds-muted); background:rgba(37,99,235,.05); border-left:3px solid var(--vds-blue); border-radius:6px; }

/* ---- Support tickets ---------------------------------------------------- */
.vds-golden { background:rgba(37,99,235,.07); border-left:4px solid var(--vds-blue); padding:.9rem 1.1rem; border-radius:8px; margin:0 0 1.2rem; font-size:.95rem; }
.vds-guide { margin:0 0 1.4rem; border:1px solid var(--vds-line); border-radius:10px; padding:.55rem .9rem; background:#fff; }
.vds-guide summary { cursor:pointer; font-weight:600; color:var(--vds-blue); }
.vds-guide__body { margin-top:.6rem; font-size:.92rem; color:var(--vds-muted); line-height:1.55; }
.vds-guide__body code { font-family:var(--font-mono); background:rgba(37,99,235,.08); padding:.1rem .35rem; border-radius:5px; }
.vds-repro { border:1px dashed var(--vds-blue); border-radius:10px; padding:.9rem 1rem; background:rgba(37,99,235,.04); }
.vds-errbox { white-space:pre-wrap; background:#0b1020; color:#fca5a5; padding:.8rem 1rem; border-radius:8px; font-family:var(--font-mono); font-size:.82rem; overflow-x:auto; margin:.3rem 0 0; }
.vds-ticketmeta { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.8rem 1.4rem; margin:1.4rem 0; }
.vds-ticketmeta dt { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--vds-muted); margin:0; }
.vds-ticketmeta dd { margin:.15rem 0 0; font-weight:600; color:var(--vds-fg); }
.vds-attlist { list-style:none; padding:0; margin:.6rem 0; }
.vds-attlist li { padding:.4rem 0; border-bottom:1px solid var(--vds-line); }
.vds-thread { display:flex; flex-direction:column; gap:.8rem; }
.vds-msg { padding:.8rem 1rem; border:1px solid var(--vds-line); border-radius:10px; background:#fff; }
.vds-msg--admin { background:rgba(37,99,235,.06); border-color:#cdd8ee; }
.vds-msg__who { font-size:.72rem; color:var(--vds-muted); margin-bottom:.3rem; }

/* ---- Encart phase de développement (popup) ------------------------------ */
.vds-devnotice { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1.2rem; }
.vds-devnotice[hidden] { display:none; }
.vds-devnotice__backdrop { position:absolute; inset:0; background:rgba(8,12,28,.66); backdrop-filter:blur(3px); }
.vds-devnotice__card { position:relative; max-width:480px; width:100%; background:#fff; border-radius:18px; padding:clamp(1.5rem,4vw,2.4rem); box-shadow:0 40px 90px -30px rgba(8,12,28,.6); text-align:center; animation:vds-devnotice-in .35s cubic-bezier(.2,.7,.3,1); }
@keyframes vds-devnotice-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.vds-devnotice__badge { display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vds-blue); background:rgba(37,99,235,.09); padding:.3rem .7rem; border-radius:var(--radius-pill); margin-bottom:1rem; }
.vds-devnotice__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.2; color:var(--vds-fg); margin:0 0 .8rem; }
.vds-devnotice__body { color:var(--vds-muted); font-size:1rem; line-height:1.6; margin:0 0 1.5rem; }

/* ---- Manifeste « Why VDS exists » --------------------------------------- */
.vds-why { background:var(--vds-night); color:#fff; padding:clamp(64px,9vw,120px) 0; }
.vds-why__in { max-width:760px; margin:0 auto; text-align:center; }
.vds-why__eyebrow { font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vds-cyan); }
.vds-why__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.05; margin:.6rem 0 0; }
.vds-why__lead { font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.5; color:#cdd8ee; margin:1.2rem auto 0; max-width:48ch; }
.vds-why__list { list-style:none; padding:0; margin:2.4rem auto 0; max-width:44ch; text-align:left; display:flex; flex-direction:column; gap:1rem; }
.vds-why__list li { position:relative; padding-left:2rem; font-size:1.1rem; line-height:1.5; color:#e7edf9; }
.vds-why__list li::before { content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--vds-blue),var(--vds-cyan)); }
.vds-why__closing { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,3.2vw,2.4rem); letter-spacing:-.02em; line-height:1.1; margin:2.6rem 0 0; background:linear-gradient(95deg,#8ab4ff,var(--vds-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vds-why__ai { font-family:var(--font-mono); font-size:.95rem; letter-spacing:.04em; color:var(--vds-cyan); margin:1.4rem 0 0; }
.vds-price ul { list-style:none; padding:0; margin:1rem 0 1.4rem; display:grid; gap:.5rem; }
.vds-price li { color:var(--vds-muted); font-size:.92rem; display:flex; gap:.5rem; }
.vds-price li svg{ color:var(--vds-green); flex:0 0 auto }
.vds-price .vds-btn{ margin-top:auto; justify-content:center; }
.vds-price--feat .vds-btn--ghost{ color:#fff; background:linear-gradient(95deg,var(--vds-cyan),var(--vds-blue)); border-color:transparent; }

/* ---- Final CTA ----------------------------------------------------------- */
.vds-final { background:var(--vds-night); color:#fff; text-align:center; padding:clamp(64px,9vw,120px) 0; position:relative; overflow:clip; }
.vds-final::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%,rgba(37,99,235,.4),transparent 60%); }
.vds-final .vds__wrap{ position:relative; z-index:1; }
.vds-final h2 { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,4.4vw,3.4rem); margin:0 0 .6rem; }
.vds-final p { color:#aebcd6; font-size:1.12rem; margin:0 auto 1.9rem; max-width:48ch; }
.vds-final .vds-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.05); }

/* ==========================================================================
   PAGES CMS — hero de page + prose aeree + CTA achat
   ========================================================================== */
.vds-phero { position:relative; background:var(--vds-night); color:#fff; overflow:clip; padding:clamp(56px,8vw,104px) 0 clamp(40px,5vw,64px); margin-top:-1px; }
.vds-phero__bg { position:absolute; inset:-30% -10% auto; height:140%; z-index:0; filter:blur(70px); opacity:.4; pointer-events:none;
  background: radial-gradient(40% 60% at 20% 30%,var(--vds-blue),transparent 60%),
             radial-gradient(40% 60% at 85% 20%,var(--vds-cyan),transparent 62%),
             radial-gradient(40% 70% at 70% 90%,var(--vds-green),transparent 60%); }
.vds-phero::before{ content:""; position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 54px, linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/54px 100%;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 78%); }
.vds-phero .vds__wrap{ position:relative; z-index:2; max-width:880px; }
.vds-phero__crumb { font-family:var(--font-mono); font-size:.78rem; color:#8aa0c8; margin-bottom:1rem; }
.vds-phero__crumb a{ color:#8aa0c8; text-decoration:none; } .vds-phero__crumb a:hover{ color:var(--vds-cyan); }
.vds-phero__eyebrow { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vds-cyan); }
.vds-phero h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; font-size:clamp(2.3rem,5vw,3.8rem); line-height:1.02; margin:.5rem 0 0; }
.vds-phero .lede { color:#b6c4dd; font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.55; max-width:48ch; margin:1.2rem 0 0; }

/* prose */
.vds-prosewrap { background:var(--vds-paper); padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,96px); }
.vds-prose { max-width:760px; margin:0 auto; padding:0 24px; color:#28324a; font-size:1.135rem; line-height:1.78; }
.vds-prose > *:first-child{ margin-top:0; }
.vds-prose p { margin:1.25em 0; }
.vds-prose .lede { font-size:1.3rem; line-height:1.6; color:#3a4663; font-weight:500; }
.vds-prose h2 { font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.15; margin:2.4em 0 .6em; padding-top:.3em; color:var(--vds-fg); position:relative; }
.vds-prose h2::before { content:""; position:absolute; left:-24px; top:1.15em; width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--vds-blue),var(--vds-cyan)); }
.vds-prose h3 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:1.8em 0 .5em; color:var(--vds-fg); }
.vds-prose h4 { font-weight:700; font-size:1.08rem; margin:1.6em 0 .4em; color:var(--vds-fg); }
.vds-prose a { color:var(--vds-blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.vds-prose strong { color:var(--vds-fg); font-weight:700; }
.vds-prose ul, .vds-prose ol { margin:1.2em 0; padding-left:1.4em; }
.vds-prose li { margin:.5em 0; padding-left:.2em; }
.vds-prose ul li::marker { color:var(--vds-blue); }
.vds-prose blockquote { margin:1.6em 0; padding:1em 1.3em; border-left:3px solid var(--vds-blue); background:#eef3fb; border-radius:0 10px 10px 0; color:#33405e; font-style:italic; }
.vds-prose :not(pre) > code { font-family:var(--font-mono); font-size:.9em; background:#eef1f7; color:#1d4ed8; padding:.12em .4em; border-radius:5px; border:1px solid #e0e6f0; }
/* tokens VDS colorises inline dans le texte (vds-highlight.js) */
.vds-prose .vt { font-family:var(--font-mono); font-size:.92em; font-weight:600; }
.vds-prose .vt-v { color:var(--syn-var); }                 /* %variable rouge */
.vds-prose .vt-d { color:var(--syn-var); font-weight:700; }/* #DEFINE rouge gras */
.vds-prose .vt-f { color:var(--syn-cmd); }                 /* @fonction noir gras */
.vds-prose .vt-s { color:var(--syn-str); }                 /* identifier/param bleu (args de directive) */
.vds-prose img { max-width:100%; height:auto; border-radius:12px; border:1px solid var(--vds-line); box-shadow:0 24px 50px -28px rgba(20,40,90,.35); margin:1.8em 0; display:block; }
.vds-prose figure { margin:2em 0; } .vds-prose figcaption { color:var(--vds-muted); font-size:.9rem; text-align:center; margin-top:.6em; }
.vds-prose table { width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.98rem; }
.vds-prose th, .vds-prose td { border:1px solid var(--vds-line); padding:.6em .8em; text-align:left; }
.vds-prose th { background:#eef3fb; font-weight:700; }

/* blocs de code colorises (le JS habille <pre> en .vds-win > .vds-code) */
.vds-prose .vds-win { margin:1.8em 0; }
.vds-prose pre.vds-code { font-size:.9rem; }

/* CTA achat bas de page */
.vds-pagecta { background:var(--vds-night); color:#fff; position:relative; overflow:clip; }
.vds-pagecta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 130% at 50% 100%,rgba(37,99,235,.35),transparent 60%); }
.vds-pagecta__in { position:relative; z-index:1; max-width:880px; margin:0 auto; padding:clamp(44px,6vw,72px) 24px; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.vds-pagecta h3 { font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:0 0 .3rem; letter-spacing:-.02em; }
.vds-pagecta p { color:#aebcd6; margin:0; }

/* ==========================================================================
   FICHE PRODUIT
   ========================================================================== */
.vds-pd { position:relative; background:var(--vds-night); color:#fff; overflow:clip; padding:clamp(34px,5vw,64px) 0 clamp(50px,7vw,92px); margin-top:-1px; }
.vds-pd__bg { position:absolute; inset:-30% -10% auto; height:150%; z-index:0; filter:blur(75px); opacity:.4; pointer-events:none;
  background:radial-gradient(40% 60% at 22% 30%,var(--vds-blue),transparent 60%), radial-gradient(38% 56% at 82% 22%,var(--vds-cyan),transparent 62%), radial-gradient(40% 60% at 70% 92%,var(--vds-green),transparent 60%); }
.vds-pd .vds__wrap { position:relative; z-index:2; }
.vds-pd__grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,60px); align-items:center; margin-top:2rem; }
@media (max-width:880px){ .vds-pd__grid{ grid-template-columns:1fr; } }
.vds-pd__card { text-align:center; border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:clamp(32px,4vw,56px);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); box-shadow:0 40px 90px -34px rgba(0,0,0,.7), 0 0 60px -24px rgba(56,189,248,.4); }
.vds-pd__icon { border-radius:22px; box-shadow:0 24px 54px -16px rgba(0,0,0,.6); }
.vds-pd__cardname { font-family:var(--font-display); font-weight:800; font-size:1.4rem; margin-top:1.1rem; letter-spacing:-.02em; }
.vds-pd__ver { font-family:var(--font-mono); color:var(--vds-cyan); font-size:.86rem; margin-top:.3rem; }
.vds-pd__badges { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:1.3rem; }
.vds-pd__badges span { font-family:var(--font-mono); font-size:.72rem; color:#dbe6ff; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); padding:.3rem .55rem; border-radius:99px; }
.vds-pd__eyebrow { font-family:var(--font-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--vds-cyan); }
.vds-pd__title { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.04; margin:.4rem 0 0; }
.vds-pd__lede { color:#b6c4dd; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; max-width:46ch; margin:1rem 0 0; }
.vds-pd__buy { margin-top:1.8rem; padding:clamp(1.2rem,2vw,1.6rem); border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.03); }
.vds-pd__price { font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3vw,2.6rem); }
.vds-pd__price small { font-size:1rem; color:#9fb0cf; font-weight:600; }
.vds-pd__variants { border:0; padding:0; margin:1.1rem 0 0; display:grid; gap:.5rem; }
.vds-pd__variants legend { font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:#9fb0cf; margin-bottom:.3rem; }
.vds-pd__variant { display:flex; align-items:center; gap:.6rem; border:1px solid rgba(255,255,255,.16); border-radius:11px; padding:.7rem .9rem; cursor:pointer; transition:.16s; }
.vds-pd__variant.is-active, .vds-pd__variant:hover { border-color:var(--vds-cyan); background:rgba(56,189,248,.08); }
.vds-pd__variant input { accent-color:var(--vds-blue); }
.vds-pd__variant span { flex:1; font-weight:600; } .vds-pd__variant b { color:#fff; }
.vds-pd__cta { margin-top:1.2rem; }
.vds-pd__add { width:100%; justify-content:center; font-size:1.05rem; }
.vds-pd__add .product-cta__price { opacity:.85; font-weight:700; }
.vds-pd__reassure { font-family:var(--font-mono); font-size:.78rem; color:#8ea2c4; text-align:center; margin:.9rem 0 0; line-height:1.5; }
.vds-pd__specs { margin-top:1.8rem; }
.vds-pd__specs > div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.09); }
.vds-pd__specs dt { color:#9fb0cf; } .vds-pd__specs dd { color:#fff; font-weight:600; margin:0; text-align:right; }

/* ==========================================================================
   BOUTIQUE — grille de cartes
   ========================================================================== */
.vds-shop { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; }
.vds-shopcard { position:relative; display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--vds-line); border-radius:16px; padding:1.6rem; background:#fff; color:var(--vds-fg); transition:.22s cubic-bezier(.2,.7,.3,1); }
.vds-shopcard:hover { transform:translateY(-4px); box-shadow:0 24px 54px -24px rgba(20,40,90,.32); border-color:#cdd8ee; }
.vds-shopcard.is-feat { border-color:transparent; box-shadow:0 0 0 2px var(--vds-blue); }
.vds-shopcard__tag { position:absolute; top:-11px; left:1.5rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(95deg,var(--vds-blue),var(--vds-cyan)); padding:.25rem .6rem; border-radius:6px; font-weight:700; }
.vds-shopcard__icon { border-radius:13px; box-shadow:0 12px 26px -12px rgba(20,40,90,.4); }
.vds-shopcard h3 { font-family:var(--font-display); font-weight:800; font-size:1.25rem; margin:1rem 0 .4rem; letter-spacing:-.015em; }
.vds-shopcard__desc { color:var(--vds-muted); font-size:.95rem; line-height:1.5; margin:0 0 1.2rem; flex:1; }
.vds-shopcard__foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:1rem; border-top:1px solid var(--vds-line); }
.vds-shopcard__price { font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.vds-shopcard__cta { color:var(--vds-blue); font-weight:700; font-size:.95rem; }