/* Visuels d'article du blog : kit commun.
   Chaque visuel est un fragment HTML + SVG (content/drafts/NNN-slug/visuel-N.html) écrit avec les
   classes vz-*, que la chaîne enveloppe dans <figure class="vz" role="img" aria-label="…">.
   Largeur utile : environ 594 px dans la colonne d'article, 304 px sur un téléphone de 390 px.
   Sous 520 px de large, les compositions passent en version étroite (requêtes de conteneur).
   Aucune animation. Mode d'emploi et exemples : content/drafts/_FORMAT.md. */

.vz{--vz-fond:#10131a;--vz-surface:#151922;--vz-surface-2:#1a1f29;--vz-trait:#2c3240;--vz-trait-doux:#1f242f;--vz-os:#272c38;--vz-encre:#e7e9ee;--vz-encre-2:#a3a9b5;--vz-encre-3:#6d7482;--vz-dessin:#8a91a0;--vz-acc:#f97316;--vz-acc-doux:rgba(249,115,22,.09);--vz-acc-trait:rgba(249,115,22,.62);--vz-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;--vz-serif:ui-serif,"New York",Georgia,"Times New Roman",serif;position:relative;isolation:isolate;container-type:inline-size;margin:34px 0;padding:52px 40px;background:var(--vz-fond);border:1px solid var(--vz-trait-doux);border-radius:14px;color:var(--vz-encre-2);font-size:14px;line-height:1.4;letter-spacing:0;text-align:left}
.vz::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.4px);background-size:20px 20px;background-position:10px 10px;-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 25%,transparent 100%)}
@media (max-width:620px){.vz{margin:28px 0;padding:34px 18px}}

/* Texte : étiquette 13 px, texte appuyé 14 px, jamais sous 12 px, jamais au-dessus de 20 px */
.vz-t{font-size:13px;line-height:1.35;color:var(--vz-encre-2)}
.vz-t-fort{font-size:14px;line-height:1.35;font-weight:500;color:var(--vz-encre)}
.vz-t-pale{color:var(--vz-encre-3)}
.vz-acc{color:var(--vz-acc)}
.vz-mono{font-family:var(--vz-mono);letter-spacing:-.01em}
.vz-nw{white-space:nowrap}
.vz-centre{text-align:center}

/* Mise en page */
.vz-bloc{display:block}
.vz-pile{display:flex;flex-direction:column;align-items:center;gap:var(--vz-gap,10px)}
.vz-rang{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--vz-gap,8px)}
.vz-max{width:min(100%,var(--vz-max,520px));margin-inline:auto}
@container (max-width:520px){.vz-large{display:none!important}}
@container (min-width:521px){.vz-etroit{display:none!important}}

/* Pièces de base : squelette d'interface, panneau, puce, dessin au trait, flèche */
.vz-sq{display:block;height:8px;width:var(--l,100%);border-radius:4px;background:var(--vz-os)}
.vz-panneau{position:relative;background:var(--vz-surface);border:1px solid var(--vz-trait);border-radius:12px}
.vz-panneau-pale{background:transparent;border-style:dashed;border-color:var(--vz-trait)}
.vz-panneau-acc{border-color:var(--vz-acc-trait);box-shadow:0 0 0 4px var(--vz-acc-doux)}
.vz-puce{display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1px solid var(--vz-trait);border-radius:999px;font-size:13px;line-height:1;color:var(--vz-encre-2);white-space:nowrap}
.vz-puce-acc{height:32px;padding:0 14px;font-size:15px;font-weight:500;color:var(--vz-encre);border-color:var(--vz-acc-trait);background:var(--vz-acc-doux)}
.vz-puce-petite{height:22px;padding:0 9px;font-size:12px;color:var(--vz-encre-3)}
.vz-etoiles{font-size:12px;line-height:1;letter-spacing:2px;color:#474d5a;white-space:nowrap}
.vz svg{display:block;overflow:visible}
.vz-dessin{fill:none;stroke:var(--vz-dessin);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.vz-dessin *{vector-effect:non-scaling-stroke}
.vz-dessin .vz-plein{fill:var(--vz-os);stroke:none}
.vz-dessin .vz-trait-acc{stroke:var(--vz-acc)}
.vz-fleche{flex:none;width:56px;height:14px;fill:none;stroke:var(--vz-encre-3);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

/* A puis B : deux éléments reliés par une flèche, côte à côte, empilés en étroit
   (avant / après, dialogue). Colonnes réglables par --vz-colonnes. */
.vz-duo{display:grid;grid-template-columns:var(--vz-colonnes,minmax(0,1fr) auto minmax(0,1fr));justify-content:center;align-items:center;gap:20px}
.vz-duo>.vz-fleche{margin-bottom:var(--vz-decal,0)}
@container (max-width:520px){.vz-duo{grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px}.vz-duo>.vz-fleche{transform:rotate(90deg);margin:22px 0}}

/* Maquette d'interface et renvois : un panneau simplifié, des traits fins qui sortent du
   panneau vers une note. En étroit, la note passe sous l'élément, avec un filet à gauche. */
.vz-renvois{--vz-pm:18px;position:relative;width:min(100%,540px);margin-inline:auto}
.vz-maquette{width:var(--vz-maquette,292px);padding:0 var(--vz-pm) var(--vz-pm);overflow:visible}
.vz-maquette-bandeau{position:relative;height:66px;margin:0 calc(-1*var(--vz-pm)) 16px;border-bottom:1px solid var(--vz-trait);border-radius:11px 11px 0 0;background:var(--vz-surface-2);overflow:hidden}
.vz-renvoi-rang{position:relative;display:flex;align-items:center;gap:6px}
.vz-renvoi-trait{position:relative;flex:1 1 auto;min-width:14px;height:1px;margin-left:6px;margin-right:calc(-1*var(--vz-pm) - 1px - 26px);background:var(--vz-trait)}
.vz-renvoi-trait::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--vz-encre-3)}
.vz-renvoi{position:absolute;left:calc(100% + var(--vz-pm) + 1px + 26px + 12px);top:50%;transform:translateY(-50%);width:max-content;max-width:210px;display:flex;flex-direction:column;gap:1px}
.vz-renvoi-acc .vz-renvoi-trait{background:var(--vz-acc-trait)}
.vz-renvoi-acc .vz-renvoi-trait::after{background:var(--vz-acc)}
@container (max-width:520px){.vz-maquette{width:100%}.vz-renvoi-rang{flex-wrap:wrap}.vz-renvoi-trait{display:none}.vz-renvoi{position:static;transform:none;flex-basis:100%;max-width:none;flex-direction:row;flex-wrap:wrap;column-gap:4px;margin:6px 0 2px 12px;padding-left:10px;border-left:1px solid var(--vz-trait)}.vz-renvoi-acc .vz-renvoi{border-left-color:var(--vz-acc-trait)}}

/* Pellicule : images d'une même vidéo, perforations, légendes, trait continu de la prise */
.vz-pellicule{width:min(100%,520px);margin-inline:auto}
.vz-bande{position:relative;padding:17px 10px;background:#0b0d12;border:1px solid var(--vz-trait-doux);border-radius:8px}
.vz-bande::before,.vz-bande::after{content:"";position:absolute;left:12px;right:12px;height:4px;border-radius:1px;background:repeating-linear-gradient(90deg,var(--vz-os) 0 7px,transparent 7px 15px)}
.vz-bande::before{top:6px}.vz-bande::after{bottom:6px}
.vz-images,.vz-legendes{display:grid;grid-template-columns:repeat(var(--vz-n,3),minmax(0,1fr));gap:6px}
.vz-image{display:grid;place-items:center;aspect-ratio:4/3;background:var(--vz-surface);border:1px solid var(--vz-trait-doux);border-radius:3px}
.vz-image svg{width:80%;height:auto}
.vz-legendes{margin:12px 11px 0;text-align:center}
.vz-prise{position:relative;height:9px;margin:10px 11px 0}
.vz-prise::before{content:"";position:absolute;left:3px;right:0;top:4px;height:1px;background:var(--vz-acc-trait)}
.vz-prise-debut{position:absolute;left:0;top:1px;width:7px;height:7px;border-radius:50%;background:var(--vz-acc)}
.vz-prise-fin{position:absolute;right:0;top:0;width:1px;height:9px;background:var(--vz-acc)}
.vz-prise-repere{position:absolute;top:0;width:1px;height:4px;background:var(--vz-acc-trait)}
.vz-prise+.vz-t-fort{display:block;margin-top:12px;text-align:center}

/* Anatomie annotée : un objet (adresse, bouton…) et ses parties, accolades et légendes
   au-dessus (vz-partie-haut) ou au-dessous. */
.vz-anatomie{display:flex;justify-content:center;padding:82px 0 64px}
.vz-barre{display:inline-flex;align-items:center;gap:10px;padding:13px 22px 13px 16px;background:var(--vz-surface);border:1px solid var(--vz-trait);border-radius:999px}
.vz-objet{font-family:var(--vz-mono);font-size:20px;line-height:1;color:var(--vz-encre);white-space:nowrap}
.vz-partie{position:relative;display:inline-block}
.vz-partie-acc{color:var(--vz-acc)}
.vz-accolade{position:absolute;left:0;right:0;top:calc(100% + 22px);height:7px;border:1px solid var(--vz-encre-3);border-top:0;border-radius:0 0 3px 3px}
.vz-partie-haut .vz-accolade{top:auto;bottom:calc(100% + 22px);border-top:1px solid var(--vz-encre-3);border-bottom:0;border-radius:3px 3px 0 0}
.vz-partie-acc .vz-accolade{border-color:var(--vz-acc-trait)}
.vz-legende{position:absolute;left:50%;top:calc(100% + 29px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;padding-top:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;white-space:nowrap;text-align:center}
.vz-legende::before{content:"";position:absolute;left:50%;top:0;width:1px;height:8px;background:var(--vz-encre-3)}
.vz-partie-haut .vz-legende{top:auto;bottom:calc(100% + 29px);padding:0 0 12px}
.vz-partie-haut .vz-legende::before{top:auto;bottom:0}
.vz-partie-acc .vz-legende::before{background:var(--vz-acc-trait)}

/* Dialogue : bulle de parole et papier manuscrit */
.vz-bulle{padding:12px 18px;background:var(--vz-surface);border:1px solid var(--vz-trait);border-radius:16px 16px 16px 4px;white-space:nowrap}
.vz-papier{position:relative;padding:15px 26px 13px;border:1px solid var(--vz-trait);border-radius:3px;background:var(--vz-surface-2) repeating-linear-gradient(180deg,transparent 0 23px,rgba(255,255,255,.045) 23px 24px);transform:rotate(-1.2deg);white-space:nowrap}
.vz-manuscrit{font-family:var(--vz-serif);font-style:italic;font-size:19px;line-height:1.3;color:var(--vz-encre)}
.vz-faute{color:var(--vz-acc);text-decoration:underline wavy var(--vz-acc-trait);text-decoration-thickness:1px;text-underline-offset:5px}

/* Jauge ou échelle qualitative : une rangée d'éléments sur un axe, sans chiffre */
.vz-jauge{width:min(100%,520px);margin-inline:auto}
.vz-bornes{display:flex;justify-content:space-between;gap:16px}
.vz-graduation{display:grid;grid-template-columns:repeat(var(--vz-n,4),minmax(0,1fr));gap:10px;margin:12px 0 0}
.vz-echelle{position:relative;height:1px;margin:20px 0 10px;background:linear-gradient(90deg,var(--vz-trait),var(--vz-acc))}
.vz-echelle::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--vz-acc);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
@container (max-width:520px){.vz-graduation{gap:6px}}

/* Parcours et arbre de décision : nœuds reliés par des traits */
.vz-noeud{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 14px;background:var(--vz-surface);border:1px solid var(--vz-trait);border-radius:10px;text-align:center}
.vz-lien-v{width:1px;height:var(--h,20px);background:var(--vz-trait)}
.vz-branches{position:relative;display:grid;grid-template-columns:repeat(var(--vz-n,2),minmax(0,1fr));gap:16px;width:min(100%,420px);padding-top:20px}
.vz-branches::before{content:"";position:absolute;top:0;left:calc(50% / var(--vz-n,2));right:calc(50% / var(--vz-n,2));height:1px;background:var(--vz-trait)}
.vz-branches>*{position:relative;justify-self:center}
.vz-branches>*::before{content:"";position:absolute;left:50%;top:-21px;width:1px;height:20px;background:var(--vz-trait)}