/* logiciel-gestion-de-projet.fr — famille V10-vestiaire, habillage vert électrique (hue 122) */
@font-face{
  font-family:"Big Shoulders Text"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/fonts/big-shoulders-text-latin-variable.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Big Shoulders Text"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/fonts/big-shoulders-text-latin-ext-variable.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
  --vst-ink:            oklch(0.190 0.020 122);
  --vst-ink-2:          oklch(0.300 0.024 122);
  --vst-surface:        oklch(0.255 0.020 122);
  --vst-paper:          oklch(0.975 0.010 122);
  --vst-paper-2:        oklch(0.935 0.016 122);
  --prm-accent:         oklch(0.720 0.190 122);
  --prm-accent-deep:    oklch(0.480 0.170 122);
  --prm-accent-soft:    oklch(0.860 0.130 122);
  --vst-line:           oklch(0.360 0.018 122);
  --vst-field-line:     oklch(0.560 0.024 122);
  --vst-field-line-ink: oklch(0.640 0.030 122);
  --vst-white:          oklch(0.99 0.004 122);
  --font-title: "Big Shoulders Text", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 2px;
  --vst-maxw: 1200px;
  --sec-y: clamp(40px, 5.6vw, 76px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--vst-paper); color:var(--vst-ink);
  font-family:var(--font-body); font-weight:400; line-height:1.55; font-size:17px;
}
h1,h2,h3,h4{font-family:var(--font-title); line-height:.98; margin:0 0 .45em; text-transform:uppercase; letter-spacing:.005em; overflow-wrap:break-word}
h1{font-size:clamp(2rem, 5.2vw, 3.6rem); font-weight:900}
h1 em.prm-w900{font-style:normal; font-weight:900}
h1 em.prm-w200{font-style:normal; font-weight:200; color:var(--prm-accent-soft); text-transform:none}
.on-dark h1{color:var(--vst-white)}
h2{font-size:clamp(1.5rem, 2.9vw, 2.15rem); font-weight:900; margin-top:0}
h2 em.prm-w200{font-weight:200; font-style:normal}
h3{font-size:1.08rem; font-weight:700; text-transform:none; letter-spacing:0}
p{margin:0 0 1em}
a{color:var(--prm-accent-deep)}
.on-dark a{color:var(--prm-accent-soft)}
ul{margin:0 0 1em; padding-left:1.2em}
img{max-width:100%; height:auto; display:block; border-radius:0}
.vst-skip{position:absolute; left:-999px; top:0; background:var(--vst-white); padding:.6em 1em; z-index:100}
.vst-skip:focus{left:8px; top:8px}
.vst-wrap{max-width:var(--vst-maxw); margin:0 auto; padding:0 1.25rem}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
.tab-nums{font-variant-numeric:tabular-nums}

/* topbar */
.vst-topbar{background:var(--vst-surface); color:var(--vst-white); font-size:.8rem}
.vst-topbar-in{display:flex; justify-content:space-between; gap:1rem; padding:.3rem 1.25rem; flex-wrap:wrap}
.vst-topbar a{color:var(--vst-white)}
.vst-topbar-in span{display:none}
@media (min-width:560px){.vst-topbar-in span{display:inline}}

/* header — gradient sombre dès t=0, jamais transparent-invisible (leçon V05 reconduite) */
.vst-header{background:linear-gradient(180deg, var(--vst-ink) 0%, var(--vst-surface) 100%); position:sticky; top:0; z-index:40}
.vst-header-in{display:flex; align-items:center; gap:1rem; padding:.65rem 1.25rem; flex-wrap:nowrap; position:relative}
.vst-logo{font-family:var(--font-title); font-weight:900; font-size:1.15rem; text-transform:uppercase; color:var(--vst-white); text-decoration:none;
  margin-right:auto; flex-shrink:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.vst-burger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:44px; height:44px;
  border:1.5px solid var(--vst-line); border-radius:var(--radius); background:transparent; cursor:pointer; flex-shrink:0; padding:0}
.vst-burger-bar{display:block; width:16px; height:2px; background:var(--vst-white); margin:0 auto}
.vst-nav{display:flex; align-items:center; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch}
.vst-nav-list{list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; align-items:center; flex-wrap:nowrap; white-space:nowrap}
.vst-nav-list > li > a{color:var(--vst-white); text-decoration:none; font-weight:600; font-size:.92rem}
.vst-cta-header-short{display:none}

@media (max-width:640px){
  .vst-burger{display:flex}
  .vst-cta-header-full{display:none}
  .vst-cta-header-short{display:inline}
  .vst-nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--vst-surface)}
  .vst-nav.is-open{display:block}
  .vst-nav-list{flex-direction:column; align-items:stretch; gap:0; white-space:normal; padding:.5rem 1.25rem 1rem}
  .vst-nav-list > li > a, .vst-nav-drop-btn{display:block; padding:.6rem 0; font-size:1rem}
  .vst-nav-sub{position:static; box-shadow:none; border:0; padding:0 0 0 1rem}
}
@media (max-width:400px){
  .vst-header-in{gap:.5rem; padding:.5rem .75rem}
  .vst-logo{max-width:44vw; font-size:.86rem}
  .vst-cta-header{padding:.45rem .55rem; font-size:.78rem}
}
.vst-nav-drop{position:relative}
.vst-nav-drop-btn{background:none; border:0; font-family:var(--font-body); font-weight:600; font-size:.92rem; color:var(--vst-white); cursor:pointer; padding:.3rem 0}
.vst-nav-sub{list-style:none; margin:0; padding:.5rem; position:absolute; top:100%; left:0; background:var(--vst-surface); border-radius:var(--radius); min-width:250px; display:none}
.vst-nav-drop:hover .vst-nav-sub, .vst-nav-drop:focus-within .vst-nav-sub{display:block}
.vst-nav-sub li a{display:block; padding:.4rem .5rem; color:var(--vst-white); text-decoration:none; font-size:.9rem}
.vst-nav-sub li a:hover{background:var(--vst-ink-2)}
.vst-cta-header{margin-left:.5rem; white-space:nowrap; flex-shrink:0; flex-grow:0}

/* boutons — bouton primaire TOUJOURS rempli à l'accent électrique, jamais à l'encre (invariant
   structurel V10, met le site à l'abri de l'angle mort "bouton qui se dissout sur fond sombre"). */
.vst-btn{display:inline-block; font-family:var(--font-body); font-weight:700; text-decoration:none; padding:.75rem 1.35rem; border-radius:var(--radius); border:0; cursor:pointer; font-size:1rem}
.prm-btn-accent{background:var(--prm-accent); color:var(--vst-ink)}
.prm-btn-accent:hover{background:var(--prm-accent-soft); color:var(--vst-ink)}
/* Sur fond sombre, ".on-dark a{color:...}" (spécificité 0,1,1) l'emportait sur ".prm-btn-accent"
   (0,1,0) et repeignait le texte du bouton en vert clair sur son propre fond vert clair (ratio
   1,6 mesuré à l'audit rendu) : le bouton primaire reste TOUJOURS encre sur accent, jamais dilué
   ni sur fond clair ni sur fond sombre — override à spécificité supérieure. */
.on-dark a.prm-btn-accent, .on-dark a.prm-btn-accent:hover{color:var(--vst-ink)}
.prm-btn-ghost{background:transparent; color:var(--vst-white); border:1.5px solid var(--vst-white); padding:.7rem 1.3rem}
.prm-btn-ghost:hover{border-color:var(--prm-accent-soft); color:var(--prm-accent-soft)}
.on-dark .prm-btn-ghost{color:var(--vst-white); border-color:oklch(0.6 0.02 122)}

/* bandes — aplats pleins, structure vient du FOND, pas des bordures (invariant V10) */
.vst-band{padding:var(--sec-y) 0}
.vst-band-alt{background:var(--vst-paper-2)}
.vst-band-surface{background:var(--vst-surface); color:var(--vst-white)}
.vst-band-surface h2, .vst-band-surface p{color:var(--vst-white)}
.vst-band-dark{background:var(--vst-ink); color:var(--vst-white)}
.vst-band-dark h1, .vst-band-dark h2, .vst-band-dark p{color:var(--vst-white)}

/* photos — scènes génériques de travail, jamais un logiciel nommé ni une personne identifiable */
.vst-photo-band{position:relative; height:340px; overflow:hidden}
.vst-photo-band img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.94)}
@media (max-width:640px){.vst-photo-band{height:210px}}
.vst-segment-photo{height:270px; overflow:hidden}
.vst-segment-photo img{display:block; width:100%; height:100%; object-fit:cover}
@media (max-width:640px){.vst-segment-photo{height:170px}}

.vst-relance{background:var(--vst-ink); color:var(--vst-white)}
.vst-relance h2, .vst-relance p{color:var(--vst-white)}
.vst-relance-in{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
@media (max-width:760px){.vst-relance-in{grid-template-columns:1fr}}

.vst-kicker{text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--prm-accent-deep); font-weight:700; margin:0 0 .5em; display:inline-block}
.on-dark .vst-kicker{color:var(--prm-accent-soft)}
/* rupture 3 (module signature uniquement) : le filet de surtitre traverse l'aplat qui le porte.
   Le filet est un élément DÉCORATIF SÉPARÉ du texte du kicker (jamais un ::before sur .vst-kicker
   lui-même) : un pseudo-élément absolu ancré sur le texte gonfle le scrollWidth de CE texte et se
   lit comme un débordement de contenu (G40) — mesuré à l'audit sur "Planification"/"Blog", corrigé
   en isolant le filet sur un conteneur non textuel. */
.prm-kicker-row{position:relative; display:inline-block}
.prm-kicker-row::after{content:""; position:absolute; left:0; right:-30px; bottom:1px; height:2px; background:currentColor; opacity:.5}
.vst-lede{font-size:1.05rem; max-width:64ch; color:oklch(0.38 0.02 122); margin-bottom:.7em}
.on-dark .vst-lede{color:oklch(0.88 0.02 122)}

/* hero mode B (accueil, index blog) — aplat plein, PAS de photo d'action, 2 boutons, le bouton
   primaire déplie le formulaire long juste en dessous, zéro défilement requis. */
.vst-hero-b{background:var(--vst-ink); padding:2.6rem 0 3rem; position:relative}
.vst-hero-b-in{max-width:46rem}
.vst-hero-b h1{color:var(--vst-white); margin-bottom:.4em}
.vst-hero-b .vst-lede{color:oklch(0.86 0.02 122); margin-bottom:1.2em}
.vst-hero-b-actions{display:flex; gap:.9rem; flex-wrap:wrap; align-items:flex-start}

/* volet du hero mode B — <details>/<summary> natif, zéro JS requis, zéro position:fixed :
   le bouton (summary, stylé comme un bouton plein) déplie directement le formulaire long en
   dessous de lui, dans le flux normal de la page. Reste mesurable sans ambiguïté par les gates
   rendus (fermé = 0 hauteur réelle, ouvert = contenu réellement visible). */
.prm-reveal summary{list-style:none; display:inline-block}
.prm-reveal summary::-webkit-details-marker{display:none}
.prm-reveal summary::marker{content:""}
.prm-reveal[open] summary{margin-bottom:.9rem}
/* Masquage EXPLICITE (pas le comportement par défaut de <details>) : mesuré à l'audit, ce
   Chromium rend le panneau fermé avec un display calculé "block" et une hauteur réelle non
   nulle (bouton du formulaire caché mesuré en plein dans le premier écran, G49/G66/G68) — le
   masquage par défaut de <details> n'est pas fiable ici, donc on le pilote nous-mêmes via
   [open], indépendant du user-agent. */
.prm-reveal-panel{display:none; background:var(--vst-white); color:var(--vst-ink); border-radius:var(--radius); padding:1.2rem; max-width:32rem}
.prm-reveal[open] .prm-reveal-panel{display:block}
.prm-reveal-panel p, .prm-reveal-panel label, .prm-reveal-panel .vst-reassure, .prm-reveal-panel .vst-consent{color:var(--vst-ink)}
@media (max-width:640px){.vst-hero-b{padding:1.8rem 0 2.2rem} .prm-reveal, .prm-reveal-panel{width:100%}}

/* formulaires */
.vst-form{display:flex; flex-direction:column; gap:.7rem}
.vst-field{display:flex; flex-direction:column; gap:.25rem}
.vst-field label{font-size:.85rem; font-weight:600; color:oklch(0.38 0.02 122)}
.vst-field label .req{color:var(--prm-accent-deep)}
.vst-field input, .vst-field select, .vst-field textarea{
  font:inherit; padding:.62rem .7rem; border:1.5px solid var(--vst-field-line); border-radius:var(--radius); background:var(--vst-white); color:var(--vst-ink);
}
.vst-field input:focus, .vst-field select:focus, .vst-field textarea:focus{outline:2px solid var(--prm-accent); outline-offset:1px}
.vst-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.vst-consent{display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:oklch(0.42 0.02 122)}
.vst-consent input{margin-top:.2rem}
.vst-reassure{font-size:.82rem; color:oklch(0.48 0.02 122); margin:.3rem 0 0}
.vst-form-card{background:var(--vst-white); color:var(--vst-ink); border-radius:var(--radius); padding:1.2rem}
.vst-band-dark .vst-form-card, .vst-band-dark .vst-form-card p, .vst-band-dark .vst-form-card .vst-lede,
.vst-band-dark .vst-form-card label, .vst-band-dark .vst-form-card .vst-reassure, .vst-band-dark .vst-form-card .vst-consent,
.vst-relance .vst-form-card, .vst-relance .vst-form-card p{color:var(--vst-ink)}
.vst-field input, .vst-field select, .vst-field textarea{border-color:var(--vst-field-line)}
.vst-band-dark .vst-field input, .vst-band-dark .vst-field select, .vst-band-dark .vst-field textarea{border-color:var(--vst-field-line-ink)}

/* module signature — "le périmètre de comparaison" : chiffres géants sur aplats pleins */
.prm-perimetre{display:grid; grid-template-columns:repeat(2, 1fr); gap:0}
@media (max-width:640px){.prm-perimetre{grid-template-columns:1fr}}
.prm-perimetre-cell{padding:1.6rem 1.5rem; position:relative; overflow:visible}
.prm-perimetre-cell:first-child{background:var(--prm-accent); color:var(--vst-ink)}
.prm-perimetre-cell:last-child{background:var(--vst-ink-2); color:var(--vst-white)}
.num{font-family:var(--font-title); font-weight:200; line-height:.85; display:block}
.num--xl{font-size:clamp(60px, 9vw, 130px)}
/* rupture 1 : le chiffre géant déborde légèrement de son aplat, comme un total qui ne tient
   plus dans son cadre. */
.prm-perimetre-cell:first-child .num--xl{margin:-.06em 0 -.05em -.02em; position:relative; z-index:2}
.prm-perimetre-label{font-weight:700; font-size:.92rem; text-transform:uppercase; letter-spacing:.03em; margin-top:.3rem; max-width:22ch}
.prm-perimetre-reduit{display:flex; gap:1.6rem; flex-wrap:wrap; margin:.6rem 0 1.1rem}
.prm-perimetre-reduit .num--md{font-size:clamp(32px,5vw,48px)}
.prm-perimetre-reduit-item{display:flex; flex-direction:column}
.prm-perimetre-reduit-item span:last-child{font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:oklch(0.45 0.02 122); max-width:16ch}
.on-dark .prm-perimetre-reduit-item span:last-child{color:oklch(0.78 0.02 122)}

/* matrice de critères — coché (prm-accent-deep, rempli) / non coché (contour seul) */
.prm-matrix{margin-top:1.4rem; overflow-x:auto}
.prm-matrix table{border-collapse:separate; border-spacing:3px; width:100%; min-width:520px; font-size:.86rem}
.prm-matrix th{text-align:left; font-weight:700; padding:.5rem .6rem; background:var(--vst-paper-2)}
.prm-matrix td{padding:0; text-align:center}
.prm-matrix .cell-head{text-align:left; padding:.5rem .6rem; font-weight:700; background:var(--vst-paper-2)}
.prm-check, .prm-nocheck{display:flex; align-items:center; justify-content:center; height:2.6rem; border-radius:var(--radius); font-size:.9rem}
.prm-check{background:var(--prm-accent-deep); color:var(--vst-white)}
.prm-nocheck{border:1.5px solid var(--vst-line); color:transparent}
/* rupture 2 : la dernière ligne de la matrice se décale d'une colonne, laissant un blanc
   assumé plutôt que de forcer une coche inventée. */
.prm-matrix tr:last-child td:first-child{padding-left:1.4rem}
.prm-matrix-caption{font-size:.82rem; color:oklch(0.48 0.02 122); margin-top:.7rem}

/* cartes segments — filet porté par les CELLULES (bordure), pas par un fond de conteneur : 5
   cartes sur 3 colonnes laisse une case vide en dernière rangée, un fond de conteneur propre s'y
   afficherait en aplat cassé (G54). Sans fond de conteneur, la case vide ne montre que le fond de
   page, jamais un aplat orphelin. */
.vst-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px}
@media (max-width:900px){.vst-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vst-cards{grid-template-columns:1fr}}
.vst-card{background:var(--vst-paper); border:1px solid var(--vst-line); border-radius:0; padding:1.5rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:inherit}
.vst-card h3{margin:0; color:var(--vst-ink); text-transform:uppercase}
.vst-card > span:last-child{font-weight:700; color:var(--prm-accent-deep); font-size:.88rem}
.prm-card-num{font-family:var(--font-title); font-weight:900; font-size:2rem; color:var(--prm-accent); line-height:1; display:block}

/* page fonctionnalité/segment — hero MODE A : titre puis formulaire, ordre CSS explicite mobile */
.vst-service-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem; align-items:start}
@media (max-width:860px){.vst-service-grid{grid-template-columns:1fr}}
@media (max-width:860px){.vst-service-grid > aside{order:-1}}
.vst-content-narrow{max-width:820px}
.vst-content-block{margin-bottom:1.7rem}
.vst-content-block h2{padding-top:1.5rem}
.vst-content-block:first-child h2{padding-top:0}

.vst-scope{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:1.3rem 0; background:var(--vst-line)}
@media (max-width:640px){.vst-scope{grid-template-columns:1fr}}
.vst-scope > div{padding:1.1rem 1.2rem}
.vst-scope-yes{background:var(--vst-paper)}
.vst-scope-no{background:var(--vst-paper-2)}
.vst-scope h3{font-size:.98rem; margin-bottom:.5rem; text-transform:uppercase}
.vst-scope ul{margin:0; padding-left:1.1em}

.vst-table-wrap{overflow-x:auto; margin:1.2rem 0}
table.vst-compare{border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem}
table.vst-compare th, table.vst-compare td{padding:.65rem .8rem; text-align:left; border-bottom:1px solid var(--vst-line)}
table.vst-compare th{background:var(--vst-paper-2); font-weight:700}
table.vst-compare tr:last-child td{border-bottom:0}

/* FAQ */
.vst-faq{display:flex; flex-direction:column; gap:2px; background:var(--vst-line)}
.vst-faq-item{background:var(--vst-paper); padding:.2rem 1rem}
.vst-faq-item summary{cursor:pointer; padding:.9rem 0; font-weight:700; list-style:none}
.vst-faq-item summary::-webkit-details-marker{display:none}
.vst-faq-item summary::after{content:"+"; float:right; font-weight:400; color:var(--prm-accent-deep)}
.vst-faq-item[open] summary::after{content:"−"}
.vst-faq-a{padding:0 0 1rem}

.vst-breadcrumb{font-size:.82rem; color:oklch(0.52 0.02 122); margin-bottom:.9rem}
.on-dark .vst-breadcrumb{color:oklch(0.75 0.02 122)}
.vst-breadcrumb a{color:inherit}
.vst-breadcrumb .sep{margin:0 .4em}

.vst-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem}
.vst-steps li{padding-left:2.8rem; position:relative}
.vst-step-num{position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:var(--radius); background:var(--prm-accent); color:var(--vst-ink); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.9rem}

/* avis */
.vst-avis{display:block}
.vst-avis-score{font-weight:700; margin-bottom:.8rem}
.vst-avis-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--vst-line)}
@media (max-width:760px){.vst-avis-list{grid-template-columns:1fr}}
.vst-avis-item{background:var(--vst-paper); padding:1.1rem}
.vst-avis-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; font-size:.85rem; gap:.5rem}
.vst-avis-who{color:oklch(0.48 0.02 122); text-align:right}
.vst-avis-profil{display:block; font-size:.76rem; max-width:22ch}
.vst-stars{color:var(--prm-accent-deep); letter-spacing:.05em}
.vst-avis-more{margin-top:.9rem}
.vst-avis-more summary{cursor:pointer; font-weight:700; color:var(--prm-accent-deep)}
.vst-avis-more .vst-avis-list{margin-top:.9rem}

/* blog */
.vst-blog-list{display:flex; flex-direction:column; gap:2px; background:var(--vst-line)}
.vst-blog-item{background:var(--vst-paper); padding:1.3rem 1.2rem}
.vst-blog-item h2{margin-bottom:.2rem; text-transform:none}
.vst-blog-item h2 a{text-decoration:none; color:var(--vst-ink)}
.vst-blog-date{font-size:.82rem; color:oklch(0.52 0.02 122); margin:0 0 .3rem}
.vst-article-body h2{margin-top:1.7rem; text-transform:none}

.vst-cta-final{background:var(--vst-ink); color:var(--vst-white)}
.vst-cta-final h2, .vst-cta-final p, .vst-cta-final .vst-lede{color:var(--vst-white)}
.vst-cta-final .vst-form-card{background:var(--vst-white); color:var(--vst-ink)}
.vst-cta-final .vst-form-card p, .vst-cta-final .vst-form-card .vst-lede, .vst-cta-final .vst-form-card label{color:var(--vst-ink)}

/* footer */
.vst-footer{background:var(--vst-surface); color:oklch(0.85 0.01 122); padding:2.6rem 0 1.5rem; font-size:.9rem}
.vst-footer a{color:oklch(0.9 0.01 122)}
.vst-footer-cols{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.6rem; margin-bottom:1.6rem}
@media (max-width:760px){.vst-footer-cols{grid-template-columns:1fr 1fr}}
.vst-footer-brand{font-weight:900; color:var(--vst-white); margin-bottom:.4rem; text-transform:uppercase}
.vst-footer-h{font-weight:700; color:var(--vst-white); margin-bottom:.5rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em}
.vst-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem}
.foot-sources{font-size:.78rem; color:oklch(0.65 0.01 122); border-top:1px solid var(--vst-line); padding-top:1rem; margin-top:.4rem}
.foot-sources a{color:oklch(0.75 0.01 122)}
.vst-copy{font-size:.78rem; color:oklch(0.72 0.01 122); margin-top:.6rem}