/* PseudonomIA — styles de la landing, complément de base.css. */

/* Titre sur trois lignes */
.vd .mega { font-size: clamp(2.375rem, min(4.5vw, 10vh), 7.5rem); }
.vd .mega .ln2, .vd .mega .ln3 { font-weight: 800; letter-spacing: -.055em; }

/* Bouton contour (vidéo) */
.pill-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-outline:hover { background: rgba(12, 24, 40, .06); }
.pill-outline svg { color: var(--bleu); }
.vd .pitch-cta { flex-direction: column; align-items: flex-start; gap: 12px; }

/* Journal horodaté du hero, gardé côté « Sur votre poste » */
.hjournal { margin-top: 14px; background: var(--ink); color: var(--white); border-radius: 6px; padding: 12px 16px; font: 500 0.78rem/1.4 var(--mono); }
.hj-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-d); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 239, 231, .55); }
.hjournal ol { display: grid; gap: 4px; }
.hjournal li { display: grid; grid-template-columns: 8ch 1fr; gap: 12px; opacity: .2; transition: opacity 400ms; }
.hjournal li.on { opacity: 1; }
.no-js .hjournal li { opacity: 1; }
.hjournal time { color: rgba(242, 239, 231, .55); }
.hjournal b { font-weight: 500; }
/* Phrase de preuve, mise en avant : encadré canari accroché au journal qu’elle commente */
.hj-trace { position: relative; display: flex; align-items: center; gap: clamp(.9rem, 1.4vw, 1.4rem); margin-top: 14px; padding: clamp(1.1rem, 1.6vw, 1.6rem) clamp(1.2rem, 1.8vw, 1.9rem); background: var(--canari); color: var(--ink); border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(12, 24, 40, .55); font: 600 clamp(1.15rem, 1.55vw, 1.7rem)/1.25 var(--display); letter-spacing: -.02em; }
.hj-trace::before { content: ""; position: absolute; left: clamp(1.4rem, 2vw, 2.2rem); top: -9px; width: 16px; height: 16px; background: var(--canari); transform: rotate(45deg); border-radius: 2px; } /* pointe vers le journal */
.hj-trace svg { flex: none; width: clamp(30px, 2.4vw, 42px); height: auto; }
.hj-trace b { font-weight: 800; }
.vd .hjournal { margin-top: 14px; }

/* Bloc 2 : pictogramme */
.expo-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(246, 216, 74, .12); color: var(--canari); margin-bottom: 8px; }
.vd .expo .lede { max-width: 44em; }

/* Bloc 3 suite : bandeau de journalisation et encart */
.vd-band { margin-top: clamp(2rem, 3vw, 3rem); display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 6px; background: var(--white); border: 1px solid var(--line); font-weight: 600; }
.vd-band svg { color: var(--bleu); flex: none; }
.vd-encart { margin-top: clamp(3.5rem, 6vw, 7rem); margin-left: auto; max-width: 38rem; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(2rem, 3vw, 3.5rem); background: var(--ink); color: var(--white); border-radius: 8px; }
.vd-encart .label { color: var(--canari); }
.vd-encart .h-lg { margin-top: 0; color: var(--white); }
.vd-encart p:last-child { color: rgba(242, 239, 231, .8); font-size: clamp(1rem, 1.15vw, 1.25rem); }
.vd-encart b { color: var(--canari); font-weight: 600; }

/* Bloc 5 : vignettes « Vous » / « Votre organisation » */
.vd .who-copy > p:not(.label) { margin-top: 1.25rem; font-size: clamp(1rem, 1.15vw, 1.1875rem); color: var(--mute); max-width: 32em; }
.vd .who-copy > p.who-ask { color: var(--ink); font-weight: 600; }
.vd .who-copy .pill { margin-top: 2rem; }
.vd-vignettes { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2rem); align-self: center; }
.vd-vignettes > div { display: grid; justify-items: center; align-content: center; gap: 22px; min-height: 260px; padding: 32px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; color: var(--bleu); text-align: center; }
.vd-vignettes .scale-t { color: var(--ink); margin: 0; }
.vd-postes { display: grid; grid-template-columns: repeat(3, 44px); gap: 12px; }
.vd-postes svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Bloc 7 */
.vd-objectif { max-width: 22em; font-size: clamp(2.125rem, 4vw, 5.5rem); }
.vd-actions { margin-top: clamp(2.5rem, 4vw, 4.5rem); }
.vd-alts { grid-template-columns: 1fr; }
.vd-alts .alt-t { margin-top: 0; font: 600 clamp(1.125rem, 1.4vw, 1.5rem)/1.3 var(--display); color: var(--white); }
.vd-pillars { margin-bottom: 0; color: rgba(242, 239, 231, .7); }

/* Fenêtre vidéo et lecteur */
.modal-video { width: min(960px, calc(100% - 24px)); }
.video-cadre { aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 24px; border-radius: 8px; background: var(--paper); color: var(--mute); text-align: center; }
.player { position: relative; border-radius: 8px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.player video::cue { font: 500 1.05rem/1.35 var(--body); color: #fff; background: rgba(12, 24, 40, .82); }
.player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.pl-big { position: absolute; left: 24px; bottom: 76px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--canari); cursor: pointer; transition: transform 200ms var(--e-out), opacity 200ms; }
.pl-big svg { width: 26px; height: 26px; fill: var(--ink); }
.pl-big:hover { transform: scale(1.05); }
.player.is-playing .pl-big { opacity: 0; pointer-events: none; }
.pl-ctrl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(12, 24, 40, .82); color: #fff; transition: opacity 250ms; }
.player.is-playing:not(:hover):not(:focus-within) .pl-ctrl { opacity: 0; }
.pl-btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.pl-btn:hover { background: rgba(255, 255, 255, .12); }
.pl-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pl-play svg { fill: currentColor; stroke: none; }
.pl-play .i-pause, .player.is-playing .pl-play .i-play { display: none; }
.player.is-playing .pl-play .i-pause { display: block; }
.pl-mute .i-muet, .player.is-muted .pl-mute .i-son { display: none; }
.player.is-muted .pl-mute .i-muet { display: block; }
.pl-cc[aria-pressed="false"] { opacity: .55; }
.pl-bar { flex: 1; min-width: 60px; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --p: 0%; }
.pl-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--canari) var(--p), rgba(255, 255, 255, .25) var(--p)); }
.pl-bar::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.pl-bar::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--canari); }
.pl-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--canari); border: 0; }
.pl-bar::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--canari); border: 0; }
.pl-time { flex: none; font: 600 13px/1 var(--body); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); padding: 0 4px; }

@media (max-width: 1200px) {
  .vd-vignettes { grid-column: auto; }
}
@media (max-width: 760px) {
  .vd .mega { font-size: clamp(2rem, 9.6vw, 3.25rem); }
  .vd .pitch-cta { align-items: stretch; }
  .vd .pitch-cta .pill { width: 100%; }
  .vd-encart { aspect-ratio: auto; max-width: none; }
  .vd-vignettes > div { min-height: 180px; padding: 20px; }
  .vd-postes { grid-template-columns: repeat(3, 32px); gap: 8px; }
  .vd-postes svg { width: 32px; height: 32px; }
  .pl-time { display: none; }
  .pl-big { left: 16px; bottom: 68px; width: 56px; height: 56px; }
  .player.is-playing .pl-ctrl { opacity: 1 !important; }
  .vd .kicker span { display: inline; }
  .vd .kicker::after { content: none; }
}

/* Hero : texte, document et panneau de l’IA alignés sur leur haut (le document est plus haut avec le journal) */
.vd .hero-row { align-items: start; }
.vd .hero-row > .pitch, .vd .hero-row > .doc, .vd .hero-row > .ia { align-self: start; }
.vd .pitch { padding-bottom: 0; padding-top: 0; }
.vd .pitch > p:first-child { margin-top: -.2em; }
/* Boutons du hero : une ligne sur grand écran ; ailleurs, ils restent dans leur colonne (retour à la ligne permis). */
.vd .pitch-cta .pill { max-width: 100%; font-size: 15px; padding-left: 22px; padding-right: 22px; text-align: left; }
@media (min-width: 1700px) { .vd .pitch-cta .pill { white-space: nowrap; } }

/* Le journal est un enfant du bloc document : on neutralise le style de carte blanche hérité de « .doc > div ». */
.vd .doc > .hjournal { background: var(--ink); color: var(--white); box-shadow: none; padding: 12px 16px; border-radius: 6px; overflow: visible; }

@media (max-width: 1000px) { .vd-encart { aspect-ratio: auto; } }

/* Mots découpés pour les entrées animées (d-anim.js) */
.dw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.dwi { display: inline-block; }

/* Bloc 7 recomposé : vidéo et inscription côte à côte, sous un filet */
.vd #contact { padding-bottom: clamp(4rem, 7vw, 7.5rem); }
.vd-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: clamp(2.5rem, 4vw, 4.5rem); border-top: 1px solid var(--line-d); }
.vd-cta > div { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(1.75rem, 2.5vw, 2.75rem) clamp(1.5rem, 3vw, 3.5rem) 0 0; }
.vd-cta > div + div { padding-left: clamp(1.5rem, 3vw, 3.5rem); border-left: 1px solid var(--line-d); }
.vd-cta-k { font: 500 0.7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--canari); }
.vd-cta .alt-t { margin: 0; font: 600 clamp(1.25rem, 1.6vw, 1.75rem)/1.25 var(--display); letter-spacing: -.02em; color: var(--white); }
.pill-ghost { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 231, .55); }
.pill-ghost i { background: var(--canari); color: var(--ink); }
.pill-ghost:hover { background: rgba(242, 239, 231, .08); box-shadow: inset 0 0 0 1.5px var(--white); }

/* Pied de page : slogan en grand (texte VDEF2), espacements resserrés */
.vd .ftr { padding-top: clamp(3.5rem, 5vw, 6rem); }
.vd-slogan { max-width: 20em; }
.vd-by { display: block; margin-bottom: .5em; font: 500 0.8rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--canari); }
.vd .vd-pillars { margin-top: clamp(2rem, 3vw, 3rem); }
.vd .ftr-row { margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }

@media (max-width: 760px) {
  .vd-cta { grid-template-columns: 1fr; }
  .vd-cta > div { padding: 1.75rem 0 0; }
  .vd-cta > div + div { padding-left: 0; border-left: 0; margin-top: 1.75rem; border-top: 1px solid var(--line-d); }
  .vd-cta .pill { width: 100%; }
}

/* ===== Hero recomposé : le message d’abord, les deux blocs de démonstration ensuite ===== */
.vd .hero-row { grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 150px) minmax(0, 1fr); row-gap: clamp(2.5rem, 6vh, 5rem); align-items: start; }
.vd .hero-row > .vd-tri { grid-column: 1; grid-row: 1; }
.vd .hero-row > .vd-anchor { grid-column: 3; grid-row: 1; }
.vd .hero-row > .vd-col-l { grid-column: 1; grid-row: 2; align-self: start; }
.vd .hero-row > .vd-col-r { grid-column: 3; grid-row: 2; align-self: start; }
.vd .vd-col .doc, .vd .vd-col .ia { margin: 0; }

/* Libellés de la frontière : juste au-dessus des deux blocs de démonstration (position calculée par d.js) */
@media (min-width: 761px) {
  /* Mis en valeur : capsules avec pictogramme, texte plus grand et plus espacé, écartées de la frontière */
  .vd .hl-top, .vd .hl-bot {
    top: 44px; /* la frontière démarre à --split-y, 44 px au-dessus des libellés (voir d.js) */
    display: inline-flex; align-items: center; gap: .75em;
    padding: .85em 1.4em; border-radius: 100px;
    font: 500 clamp(0.85rem, 1.05vw, 1.2rem)/1 var(--mono); letter-spacing: .22em;
  }
  .vd .hl-top { transform: translateX(calc(-100% - clamp(1.5rem, 2.5vw, 3rem))); color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink), 0 10px 26px -14px rgba(12, 24, 40, .45); }
  .vd .hl-top svg { color: var(--bleu); }
  .vd .hl-bot { transform: translateX(clamp(1.5rem, 2.5vw, 3rem)); color: var(--canari); background: rgba(246, 216, 74, .08); box-shadow: inset 0 0 0 1.5px var(--canari); }
  .vd .hl-top svg, .vd .hl-bot svg { width: 1.45em; height: 1.45em; flex: none; }
  /* Plus d’air entre le message et les démonstrations, pour laisser la place aux libellés */
  .vd .hero-row { row-gap: clamp(7rem, 15vh, 11rem); margin-top: clamp(3rem, 7vh, 5.5rem); }
  .vd .hero-row > .vd-col { margin-top: var(--push, 0px); }
  .vd .vd-anchor .pitch-cta { margin-top: clamp(2rem, 3.5vw, 3rem); }
}
@media (max-width: 760px) {
  .vd .hl-top svg, .vd .hl-bot svg { display: none; }
}

/* Triptyque, côté « Sur votre poste » : une phrase par ligne, le verbe en gras */
.vd-tri { margin: 0; font: 300 clamp(1.75rem, 2.7vw, 3.4rem)/1.12 var(--display); letter-spacing: -.035em; color: var(--ink); }
.vd-tri span { display: block; }
.vd-tri b { font-weight: 800; color: var(--bleu); } /* bleu du « IA » du logo */

/* Phrase d’ancrage et actions, côté « Espace de partage » */
.vd-anchor > p { margin: 0; max-width: 34em; font-size: clamp(1.0625rem, 1.3vw, 1.4rem); line-height: 1.6; color: rgba(242, 239, 231, .78); }
.vd-anchor strong { color: var(--canari); font-weight: 600; }
.vd .vd-anchor .pitch-cta { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.vd-anchor .pill-outline { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 231, .6); }
.vd-anchor .pill-outline svg { color: var(--canari); }
.vd-anchor .pill-outline:hover { background: rgba(242, 239, 231, .08); }

@media (max-width: 760px) {
  /* Mobile : tout le message reste sur le fond clair, au-dessus des démonstrations */
  .vd .hero-row > .vd-tri, .vd .hero-row > .vd-anchor, .vd .hero-row > .vd-col { grid-column: 1; grid-row: auto; }
  .vd .hero-row { grid-template-columns: 1fr; row-gap: 0; }
  .vd .hero-row > .vd-col-l { margin-top: calc(2.75rem + var(--push, 0px)); }
  .vd .hero-row > .vd-col-r { margin-top: 5.5rem; }
  /* La frontière est calculée à mi-chemin entre le document et le panneau de l’IA : avec le titre « 02 » entre les deux,
     elle tomberait sur lui. On la remonte au milieu de l’espace libre au-dessus du titre. */
  .vd .hero-dark, .vd .hero-line { top: calc(var(--fy) - 2.6rem) !important; }
  .vd-tri { font-size: clamp(1.5rem, 7vw, 2rem); margin-top: 1.25rem; }
  .vd-anchor { margin-top: 1.25rem; }
  .vd .vd-anchor .pitch-cta { flex-direction: column; align-items: stretch; }
}

/* ===== Haut du hero entièrement sur fond marine ; la séparation beige / marine ne commence qu’aux démos ===== */
.vd .hero { background: linear-gradient(180deg, var(--ink) 0, var(--ink) var(--split-y, 55%), var(--paper) var(--split-y, 55%)); }
.vd .hero-dark { top: var(--split-y, 55%); }
.vd .mega { color: var(--paper); }
.vd .mega-ghost { display: none; }
.vd .vd-tri { color: var(--paper); }
.vd .vd-tri b { color: var(--bleu); }
@media (min-width: 761px) {
  .vd .hero-line { top: var(--split-y, 55%); }
}
@media (max-width: 760px) {
  /* Mobile : marine en haut, beige pour « Sur votre poste », marine à nouveau sous la frontière horizontale */
  .vd .hero-dark { top: var(--fy); }
}
/* Zone de démonstration : départ marqué par une ligne jaune pleine largeur (rejoint la frontière verticale),
   et « Espace de partage » en marine de la charte, plus clair que le haut, pour former un panneau à part. */
.vd .hero-dark { background: var(--marine); }
.vd-split { position: absolute; z-index: 0; left: 0; right: 0; top: var(--split-y, 55%); height: 0; border-top: 2px dashed rgba(246, 216, 74, .85); pointer-events: none; }
.vd .hero-line { width: 2px; background: repeating-linear-gradient(180deg, rgba(246, 216, 74, .85) 0 7px, transparent 7px 14px); }
@media (max-width: 760px) {
  .vd-split { display: none; }
  .vd .hero-line { width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(246, 216, 74, .85) 0 7px, transparent 7px 14px); }
}

/* Logo sur le marine : cartouche blanc, comme le demande la charte (le temps que l’en-tête est transparent) */
.vd .hdr:not(.solid) .hdr-logo { background: var(--white); border-radius: 12px; padding: 8px 14px; }
.vd .hdr:not(.solid) .hdr-logo img { mix-blend-mode: normal; }
/* Au défilement : logo à fond transparent posé directement sur l’en-tête, sans cartouche ni rectangle */
.vd .hdr .hdr-logo { transition: background-color 300ms, padding 300ms; }
.vd .hdr.solid .hdr-logo { background: transparent; padding: 8px 14px; }
.vd .hdr-logo img { mix-blend-mode: normal; }


/* ===== Titres de zone : traitement éditorial (remplace les capsules) =====
   Grand titre fin, dernier mot en gras coloré, numéro discret, filet qui se dessine. */
.vd .hl-top, .vd .hl-bot { display: none !important; }
.vd-zone { position: relative; display: flex; align-items: baseline; gap: clamp(.9rem, 1.4vw, 1.4rem); margin-bottom: clamp(1.4rem, 2.4vw, 2.4rem); padding-bottom: clamp(.9rem, 1.4vw, 1.3rem); }
.vd-zone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--line, 1)); transition: transform 1.2s var(--e-out); }
.vd-zone-n { flex: none; font: 500 clamp(.75rem, .85vw, .95rem)/1 var(--mono); letter-spacing: .2em; }
.vd-zone-t { margin: 0; font: 300 clamp(2rem, 3.4vw, 3.9rem)/1 var(--display); letter-spacing: -.045em; }
.vd-zone-t b { font-weight: 800; letter-spacing: -.05em; }
.vd-zone-l .vd-zone-n { color: var(--bleu); }
.vd-zone-l .vd-zone-t { color: var(--ink); }
.vd-zone-l .vd-zone-t b { color: var(--bleu); }
.vd-zone-l::after { background: linear-gradient(90deg, var(--ink), rgba(12, 24, 40, .12)); }
.vd-zone-r .vd-zone-n { color: var(--canari); }
.vd-zone-r .vd-zone-t { color: var(--paper); }
.vd-zone-r .vd-zone-t b { color: var(--canari); }
.vd-zone-r::after { background: linear-gradient(90deg, var(--canari), rgba(246, 216, 74, .1)); }
@media (max-width: 760px) {
  .vd-zone-t { font-size: clamp(1.75rem, 8.4vw, 2.25rem); }
}

/* ===== Bloc 2 mis en scène (texte VDEF2 inchangé) : usages → tension → question → réponse ===== */
.vd-pb { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); margin-top: clamp(3.5rem, 6vw, 6.5rem); align-items: start; }
.vd-pb-tasks { margin: 0; font: 300 clamp(1.6rem, 2.6vw, 3.1rem)/1.12 var(--display); letter-spacing: -.035em; color: var(--white); }
.vd-pb-tasks > span { display: block; }
.vd-pb-tasks > em { display: block; margin-top: .55em; font-style: normal; font-weight: 800; letter-spacing: -.04em; color: var(--canari); }
.vd-pb-side { padding-left: clamp(1.25rem, 2vw, 2.25rem); border-left: 1px solid var(--line-d); }
.vd-pb-tension { margin: 0; font-size: clamp(1.0625rem, 1.25vw, 1.375rem); line-height: 1.65; color: rgba(242, 239, 231, .72); }
.vd-pb-tension mark { padding: .08em .35em; border-radius: 4px; color: var(--ink); font-weight: 600; background-image: linear-gradient(var(--canari), var(--canari)); background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.vd-pb-q { margin: clamp(1.4rem, 2vw, 2rem) 0 0; font: 700 clamp(1.5rem, 2.1vw, 2.4rem)/1.18 var(--display); letter-spacing: -.03em; color: var(--white); }
.vd-pb-answer { position: relative; margin: clamp(3.5rem, 6vw, 6.5rem) 0 0; max-width: 42em; padding-left: clamp(1.4rem, 2.2vw, 2.4rem); font: 600 clamp(1.25rem, 1.75vw, 2rem)/1.35 var(--display); letter-spacing: -.02em; color: var(--white); }
.vd-pb-mark { position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 2px; background: var(--canari); }
@media (max-width: 900px) {
  .vd-pb { grid-template-columns: 1fr; }
  .vd-pb-side { padding-left: 0; border-left: 0; padding-top: 1.75rem; border-top: 1px solid var(--line-d); }
}

/* ================= Marque : couleurs du logo (Pseudonom marine, IA bleu) ================= */
.brand { color: var(--marine); font-weight: 700; white-space: nowrap; }
.brand .b-ia { color: var(--bleu); }

/* ================= Ouverture « Comment ça marche ? » ================= */
.vd-how { background: var(--paper); padding: clamp(5rem, 10vw, 11rem) 0 clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--line); }
.vd-how-head { display: grid; gap: 1rem; }
.vd-how-t { font: 300 clamp(2.4rem, 5.6vw, 6.5rem)/.98 var(--display); letter-spacing: -.05em; color: var(--ink); max-width: 14em; text-wrap: balance; }
.vd-how-t b { font-weight: 800; color: var(--bleu); }
.vd-how-s { margin-top: clamp(2.5rem, 5vw, 5rem); }
.vd-how .sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vd-how-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); padding: clamp(1.5rem, 2.6vw, 2.75rem); background: var(--ink); border-radius: 18px; counter-reset: st; overflow: hidden; isolation: isolate; }
.vd-how-steps::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(62, 104, 175, .45), transparent); }
/* Trait qui relie les phases (se dessine à l’entrée) */
.vd-how-steps::after { content: ""; position: absolute; z-index: -1; left: calc(clamp(1.5rem, 2.6vw, 2.75rem) + 28px); right: calc(clamp(1.5rem, 2.6vw, 2.75rem) + 28px); top: calc(clamp(1.5rem, 2.6vw, 2.75rem) + clamp(1.25rem, 1.8vw, 1.75rem) + 28px); height: 2px; background: linear-gradient(90deg, var(--canari), #7fa3e0); transform-origin: 0 50%; transform: scaleX(var(--draw, 1)); }
.vd-how .st { counter-increment: st; position: relative; display: grid; align-content: start; gap: 14px; padding: clamp(1.25rem, 1.8vw, 1.75rem) 4px 4px; color: var(--white); }
.vd-how .st::before { content: "0" counter(st); position: absolute; top: 0; left: 72px; font: 500 .6875rem/1 var(--mono); letter-spacing: .12em; color: rgba(242, 239, 231, .5); }
.vd-how .st svg { width: 56px; height: 56px; padding: 15px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(242, 239, 231, .22); fill: none; stroke: var(--canari); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vd-how .stn { display: inline-block; font: 700 clamp(1.15rem, 1.6vw, 1.6rem)/1.15 var(--display); letter-spacing: -.025em; }
.vd-how .stn::first-letter { text-transform: uppercase; }
.vd-how-c { display: block; margin-top: clamp(2rem, 3.5vw, 3.5rem); max-width: 22em; font: 300 clamp(1.6rem, 3.1vw, 3.6rem)/1.12 var(--display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.vd-how-c::first-letter, .vd-how-c > .dw:first-child .dwi::first-letter { text-transform: uppercase; }
.vd-how-c mark { color: var(--ink); font-weight: 700; background: linear-gradient(var(--canari), var(--canari)) 0 88% / var(--hl, 100%) 38% no-repeat; }
@media (max-width: 900px) {
  .vd-how-steps { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .vd-how-steps::after { display: none; }
}
@media (max-width: 520px) {
  .vd-how-steps { grid-template-columns: 1fr; gap: 0; padding: 1.25rem 1.25rem .5rem; }
  .vd-how .st { grid-template-columns: 48px 1fr; align-items: center; gap: 16px; padding: 0 0 1rem; }
  .vd-how .st::before { display: none; }
  .vd-how .st svg { width: 48px; height: 48px; padding: 12px; }
}

/* La scène des cinq étapes suit directement l’ouverture */
.vd .cycle { border-top: 0; }
.vd #local { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(4rem, 7vw, 7rem); border-top: 0; }

/* ================= « Quelle IA avec PseudonomIA ? » mis en avant ================= */
.vd-ia { position: relative; background: var(--ink); color: var(--white); padding: clamp(5rem, 9vw, 10rem) 0; overflow: hidden; isolation: isolate; }
.vd-ia::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 50%; width: min(70vw, 1100px); aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(62, 104, 175, .35), transparent 70%); }
.vd-ia-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.vd-ia-t { font: 300 clamp(2.4rem, 5.2vw, 6rem)/.98 var(--display); letter-spacing: -.05em; color: var(--white); text-wrap: balance; }
.vd-ia-t .brand { color: var(--white); font-weight: 800; }
.vd-ia-p { margin-top: clamp(1.75rem, 3vw, 3rem); max-width: 34em; font-size: clamp(1.0625rem, 1.3vw, 1.35rem); line-height: 1.6; color: rgba(242, 239, 231, .78); }
.vd-ia-p .brand { color: var(--white); font-weight: 600; }
.vd-ia-choix { display: block; margin-bottom: .6rem; font: 800 clamp(2rem, 3.6vw, 4rem)/1 var(--display); letter-spacing: -.04em; color: var(--canari); }
.vd-ia-fan { width: 100%; height: auto; overflow: visible; }
.vd-ia-fan .ia-link { fill: none; stroke: rgba(127, 163, 224, .55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vd-ia-fan .ia-doc rect:first-child { fill: var(--white); }
.vd-ia-fan .ia-bar { fill: var(--marine); opacity: .22; }
.vd-ia-fan .ia-bar.k { fill: var(--bleu); opacity: 1; }
.vd-ia-fan .ia-node circle { fill: var(--marine); stroke: rgba(246, 216, 74, .7); stroke-width: 1.5; }
.vd-ia-fan .ia-node path { fill: var(--canari); }
.vd-ia-fan .ia-more { fill: rgba(242, 239, 231, .6); font: 700 28px/1 var(--display); }
@media (max-width: 900px) {
  .vd-ia-grid { grid-template-columns: 1fr; }
  .vd-ia-fan { max-width: 420px; margin-inline: auto; }
}

/* Rappel dans le hero, sous le panneau de l’IA */
.vd-ia-tag { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 100px; background: rgba(246, 216, 74, .1); box-shadow: inset 0 0 0 1.5px rgba(246, 216, 74, .65); color: var(--white); text-decoration: none; font: 600 .9375rem/1.2 var(--body); transition: background-color 200ms, transform 300ms var(--e-out); }
.vd-ia-tag svg { width: 20px; height: 20px; fill: var(--canari); flex: none; }
.vd-ia-tag i { font-style: normal; color: var(--canari); transition: transform 300ms var(--e-out); }
.vd-ia-tag:hover { background: rgba(246, 216, 74, .2); }
.vd-ia-tag:hover i { transform: translateX(4px); }

/* ================= Bénéfices : 6 cartes ================= */
.vd-ben-k { font-size: clamp(.8rem, .9vw, .9375rem); }
.vd-ben-k .brand { text-transform: none; letter-spacing: -.01em; font: 800 1.35em/1 var(--display); }
.vd .facts-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); border-top: 0; margin-top: clamp(3rem, 6vw, 6rem); }
.vd .facts-6 > div, .vd .facts-6 > div + div { position: relative; display: flex; padding: clamp(1.75rem, 2.4vw, 2.75rem); min-height: clamp(280px, 22vw, 360px); background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; isolation: isolate; transition: transform 500ms var(--e-out), box-shadow 500ms var(--e-out), border-color 300ms; }
.vd .facts-6 > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms var(--e-out); }
.vd .facts-6 > div:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(12, 24, 40, .38); border-color: transparent; }
.vd .facts-6 > div:hover::after { transform: scaleX(1); }
.vd .facts-6 dt { position: absolute; z-index: -1; top: clamp(.75rem, 1.2vw, 1.25rem); right: clamp(1rem, 1.6vw, 1.75rem); font: 800 clamp(4rem, 6.4vw, 7.5rem)/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(62, 104, 175, .28); transition: color 500ms, -webkit-text-stroke-color 500ms; }
.vd .facts-6 > div:hover dt { color: rgba(62, 104, 175, .1); -webkit-text-stroke-color: var(--bleu); }
.vd .facts-6 dd { margin: 0; display: flex; flex-direction: column; flex: 1; font-size: clamp(.95rem, 1vw, 1.0625rem); line-height: 1.6; color: var(--mute); }
.vd .facts-6 .bf-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(62, 104, 175, .1); color: var(--bleu); transition: background-color 400ms, color 400ms, transform 500ms var(--e-out); }
.vd .facts-6 .bf-ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vd .facts-6 > div:hover .bf-ico { background: var(--bleu); color: var(--white); transform: rotate(-6deg) scale(1.05); }
.vd .facts-6 b { margin: clamp(2.25rem, 3.4vw, 3.5rem) 0 .7rem; font: 700 clamp(1.25rem, 1.55vw, 1.7rem)/1.15 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.vd .facts-6 .brand { font-weight: 600; }
/* 05 : compatibilité avec toutes les IA, mise en avant */
.vd .facts-6 > .is-key { background: var(--ink); border-color: var(--ink); color: rgba(242, 239, 231, .78); }
.vd .facts-6 > .is-key dd { color: rgba(242, 239, 231, .78); }
.vd .facts-6 > .is-key b { color: var(--white); }
.vd .facts-6 > .is-key .brand { color: var(--white); }
.vd .facts-6 > .is-key .bf-ico { background: var(--canari); color: var(--ink); }
.vd .facts-6 > .is-key dt { -webkit-text-stroke-color: rgba(246, 216, 74, .4); }
.vd .facts-6 > .is-key::after { background: var(--canari); }
.vd .facts-6 > .is-key:hover dt { color: rgba(246, 216, 74, .12); -webkit-text-stroke-color: var(--canari); }
.vd .facts-6 > .is-key:hover .bf-ico { background: var(--canari); color: var(--ink); }
@media (max-width: 1000px) { .vd .facts-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .vd .facts-6 { grid-template-columns: 1fr; }
  .vd .facts-6 > div, .vd .facts-6 > div + div { min-height: 0; padding: 1.5rem; }
  .vd .facts-6 b { margin-top: 1.5rem; }
}

/* ================= Scène des 5 étapes : pastilles verticales ================= */
.vd .cycle-pin { position: relative; }
.vd .crail { display: none; }
.vd-dots { position: absolute; z-index: 5; right: clamp(10px, 1.6vw, 28px); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; }
.vd-dots button { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 32px; padding: 0 0 0 10px; border: 0; background: none; cursor: pointer; color: var(--ink); font: 600 .875rem/1 var(--body); }
.vd-dots i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(12, 24, 40, .35); transition: transform 300ms var(--e-out), background-color 300ms, box-shadow 300ms; }
.vd-dots i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 26px; transform: translateX(-50%); background: rgba(12, 24, 40, .12); }
.vd-dots button:last-child i::after { display: none; }
.vd-dots .vd-dot-l { opacity: 0; transform: translateX(8px); padding: 7px 11px; border-radius: 100px; background: var(--white); box-shadow: 0 6px 18px -8px rgba(12, 24, 40, .3); white-space: nowrap; transition: opacity 250ms, transform 300ms var(--e-out); pointer-events: none; }
.vd-dots button:hover .vd-dot-l, .vd-dots button:focus-visible .vd-dot-l { opacity: 1; transform: none; }
.vd-dots button:hover i { box-shadow: inset 0 0 0 2px var(--bleu); transform: scale(1.15); }
.vd-dots button.on i { background: var(--bleu); box-shadow: 0 0 0 5px rgba(62, 104, 175, .18); transform: scale(1.25); }
.vd-dots button.on .vd-dot-l { background: var(--ink); color: var(--white); box-shadow: none; }
.vd-dots button:focus-visible { outline: none; }
.vd-dots button:focus-visible i { outline: 2px solid var(--bleu); outline-offset: 3px; }
@media (max-width: 760px) {
  .vd-dots { right: 6px; gap: 2px; }
  .vd-dots .vd-dot-l { display: none; }
  .vd-dots button { min-height: 28px; padding: 0 6px; }
  .vd-dots i::after { height: 18px; }
}
/* Neutralise les règles de colonnes héritées de la version « Texte d’origine » (.orig .facts-6) */
.vd .facts-6 > div, .vd .facts-6 > div + div, .orig.vd .facts-6 > div:nth-child(n) { padding: clamp(1.75rem, 2.4vw, 2.75rem) !important; border: 1px solid var(--line) !important; }
.orig.vd .facts-6 > .is-key { border-color: var(--ink) !important; }
@media (max-width: 640px) { .vd .facts-6 > div, .vd .facts-6 > div + div, .orig.vd .facts-6 > div:nth-child(n) { padding: 1.5rem !important; } }

/* ================= Journal horodaté (après la scène des 5 étapes) ================= */
.vd-log { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 4.5rem); background: var(--ink); color: var(--white); border-radius: 22px; overflow: hidden; isolation: isolate; }
.vd-log::before { content: ""; position: absolute; z-index: -1; left: -15%; bottom: -60%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(62, 104, 175, .4), transparent); }
.vd-log-k { display: inline-flex; align-items: center; gap: 10px; font: 500 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--canari); }
.vd-log-k svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vd-log-s { margin-top: clamp(1.25rem, 2vw, 2rem); font: 300 clamp(1.6rem, 3vw, 3.4rem)/1.12 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.vd-log-s b { font-weight: 800; }
.vd-log-s .brand { color: var(--white); font-weight: 800; }
.vd-log-s mark { color: var(--ink); font-weight: 700; background: linear-gradient(var(--canari), var(--canari)) 0 100% / var(--hl, 100%) 100% no-repeat; padding: 0 .1em; border-radius: 4px; }
.vd-log-card { margin: 0; padding: clamp(1.25rem, 1.8vw, 1.75rem); background: rgba(242, 239, 231, .05); border: 1px solid rgba(242, 239, 231, .12); border-radius: 16px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.vd-log-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(242, 239, 231, .12); font: 500 .6875rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 231, .55); }
.vd-log-live { display: inline-flex; align-items: center; gap: 8px; color: var(--canari); }
.vd-log-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--canari); animation: vdPulse 1.6s ease-in-out infinite; }
.vd-log.is-done .vd-log-live::before { animation: none; background: #7fd39b; }
@keyframes vdPulse { 50% { opacity: .25; } }
.vd-log-card ol { list-style: none; margin: 0; padding: 0; }
.vd-log-card li { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "t o i" "t d i"; column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed rgba(242, 239, 231, .12); }
.vd-log-card li:last-child { border-bottom: 0; }
.vd-log-card time { grid-area: t; font: 500 .875rem/1 var(--mono); color: #7fa3e0; }
.vd-log-card li > span { grid-area: o; font: 700 1.0625rem/1.2 var(--display); color: var(--white); }
.vd-log-card em { grid-area: d; font-style: normal; font-size: .8125rem; color: rgba(242, 239, 231, .55); }
.vd-log-card i { grid-area: i; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--canari); }
.vd-log-card i svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vd-log-card figcaption { margin-top: 10px; font-size: .75rem; color: rgba(242, 239, 231, .4); }
@media (max-width: 900px) {
  .vd-log { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 1.25rem; border-radius: 16px; }
  .vd-log-card li { column-gap: 12px; }
}

/* ================= Hero : soulignés jaune clair, texte de droite agrandi ================= */
/* « Gardez le contrôle » et les trois verbes : même trait jaune clair, qui se dessine après l’arrivée du titre */
.vd .mega .ln2 .lft, .vd-tri b { background: linear-gradient(rgba(246, 216, 74, .6), rgba(246, 216, 74, .6)) 0 100% / 0% .11em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: vdUl .9s cubic-bezier(.65, 0, .35, 1) forwards; }
.vd .mega .ln2 .lft { padding-bottom: 0; background-position: 0 84%; animation-delay: 1.1s; }
.vd-tri b { background-size: 0% .14em; padding-bottom: .04em; animation-name: vdUlTri; }
.vd-tri span:nth-child(1) b { animation-delay: 1.5s; }
.vd-tri span:nth-child(2) b { animation-delay: 1.65s; }
.vd-tri span:nth-child(3) b { animation-delay: 1.8s; }
@keyframes vdUl { to { background-size: 100% .11em; } }
@keyframes vdUlTri { to { background-size: 100% .14em; } }
@media (prefers-reduced-motion: reduce) {
  .vd .mega .ln2 .lft { animation: none; background-size: 100% .11em; }
  .vd-tri b { animation: none; background-size: 100% .14em; }
}
/* Texte de droite : un cran au-dessus, sous les verbes (titre > verbes > texte) */
.vd-anchor > p { font-size: clamp(1.1875rem, 1.55vw, 1.7rem); line-height: 1.55; color: rgba(242, 239, 231, .86); }
@media (max-width: 760px) { .vd-anchor > p { font-size: 1.125rem; } }
/* « Gardez le contrôle » : aplat jaune plein, texte marine (maquette client) */
.vd .mega .ln2 .lft { padding: 0 .1em; margin-left: -.1em; background: linear-gradient(var(--canari), var(--canari)) 0 50% / 0% 100% no-repeat; color: var(--paper); animation: vdHl .8s cubic-bezier(.65, 0, .35, 1) 1.1s forwards; }
@keyframes vdHl { 60% { color: var(--paper); } to { background-size: 100% 100%; color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .vd .mega .ln2 .lft { animation: none; background-size: 100% 100%; color: var(--ink); } }
/* Les trois verbes : même aplat jaune plein, texte marine */
.vd .vd-tri b { padding: 0 .12em; margin-left: -.12em; border-radius: 2px; background: linear-gradient(var(--canari), var(--canari)) 0 50% / 0% 100% no-repeat; color: var(--paper); animation: vdHl .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.vd .vd-tri span:nth-child(1) b { animation-delay: 1.5s; }
.vd .vd-tri span:nth-child(2) b { animation-delay: 1.65s; }
.vd .vd-tri span:nth-child(3) b { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .vd .vd-tri b { animation: none; background-size: 100% 100%; color: var(--ink); } }
.vd .vd-tri { line-height: 1.24; } .vd .vd-tri span + span { margin-top: .12em; }

/* ================= Frontière de confiance : PseudonomIA posé sur la ligne entre les deux environnements ================= */
@media (min-width: 761px) {
  .vd .hero-row { grid-template-columns: minmax(0, 1fr) clamp(210px, 15.5vw, 300px) minmax(0, 1fr); }
}
.vd .hero-line { z-index: 2; }
.vd-trust { position: absolute; left: 1px; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .55rem; width: max-content; padding: 1.15rem 1.4rem 1.05rem; text-align: center; background: var(--white); border-radius: 16px; box-shadow: inset 0 0 0 2px var(--canari), 0 24px 50px -22px rgba(0, 0, 0, .55); }
.vd-trust::before { content: ""; position: absolute; inset: -8px; border-radius: 22px; border: 1.5px solid rgba(246, 216, 74, .55); animation: vdTrust 2.6s ease-out infinite; pointer-events: none; }
@keyframes vdTrust { 0% { opacity: .9; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.12); } }
.vd-trust-k { font: 500 .6875rem/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.vd-trust-i { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--canari); color: var(--ink); }
.vd-trust-i svg { width: 1.75rem; height: 1.75rem; }
.vd-trust-n { font: 800 1.3125rem/1 var(--display); letter-spacing: -.02em; color: var(--marine); }
.vd-trust-n b { color: var(--bleu); font-weight: 800; }
.vd-trust-s { font-size: .875rem; line-height: 1.2; color: var(--mute); }
@media (max-width: 760px) {
  .vd-trust { left: 50%; top: 1px; grid-template-columns: auto auto; grid-template-areas: "i k" "i n" "i s"; justify-items: start; column-gap: 12px; row-gap: 3px; padding: 12px 16px; text-align: left; }
  .vd-trust-i { grid-area: i; align-self: center; }
  .vd-trust-k { grid-area: k; }
  .vd-trust-k br { display: none; }
  .vd-trust-n { grid-area: n; }
  .vd-trust-s { grid-area: s; }
  .vd .hero-row > .vd-col-r { margin-top: 8.5rem; }
}
@media (prefers-reduced-motion: reduce) { .vd-trust::before { animation: none; } }

/* ================= Règle unique « PseudonomIA » (couleurs du logo) =================
   Pseudonom : marine sur fond clair, blanc sur fond sombre. IA : bleu sur fond clair, bleu clair sur fond sombre. */
.brand { color: var(--brand-n, var(--marine)); font-weight: 700; white-space: nowrap; text-transform: none; letter-spacing: inherit; }
.brand .b-ia { color: var(--brand-ia, var(--bleu)); }
.vd .vd-anchor, .vd .expo, .vd .demo, .vd .ftr, .vd-ia, .vd-log, .vd .facts-6 > .is-key { --brand-n: var(--white); --brand-ia: #8fb0e8; }
/* Dans les petits libellés en capitales, le nom garde sa casse de logo */
.vd-by .brand, .vd-ben-k .brand { text-transform: none; letter-spacing: -.01em; }
.vd-by .brand { font: 800 1.25em/1 var(--display); }

/* ================= Titres formulés en questions : plus grands et plus visibles ================= */
.vd .label.vd-q { display: inline-flex; align-items: center; gap: .55em; font: 800 clamp(1.75rem, 2.7vw, 3.25rem)/1.05 var(--display); letter-spacing: -.035em; text-transform: none; color: var(--bleu); }
.vd .label.vd-q::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--canari); box-shadow: 0 0 0 .18em rgba(246, 216, 74, .3); }
.vd .vd-q .brand { font: inherit; letter-spacing: inherit; }
.vd .cycle .label.vd-q, .vd-how .label.vd-q { margin-bottom: .25rem; }

/* « conformité démontrable » : surlignage continu sur toute l’expression */
.vd-how-c mark { white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ================= Frontière de confiance dans la scène des 5 étapes ================= */
.vd .cstage { grid-template-columns: 1fr 9.5rem 1fr; }
.vd .cs-border::before { border-left: 2px dashed rgba(246, 216, 74, .95); }
.cs-trust { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .5rem; padding: .9rem .8rem .8rem; text-align: center; background: var(--white); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--canari), 0 18px 40px -20px rgba(12, 24, 40, .45); }
.cs-trust::before { content: ""; position: absolute; inset: -7px; border-radius: 19px; border: 1.5px solid rgba(246, 216, 74, .55); animation: vdTrust 2.6s ease-out infinite; pointer-events: none; }
.cs-trust .vd-trust-i { width: 2.75rem; height: 2.75rem; }
.cs-trust .vd-trust-i svg { width: 1.5rem; height: 1.5rem; }
.cs-trust .vd-trust-n { font-size: 1.0625rem; }
@media (max-width: 760px) {
  .vd .cstage { grid-template-columns: 1fr; grid-template-rows: 1fr 6.5rem auto; }
  .vd .cs-border::before { border-left: 0; border-top: 2px dashed rgba(246, 216, 74, .95); }
  .cs-trust { grid-template-columns: auto auto; grid-template-areas: "i k" "i n"; justify-items: start; column-gap: .75rem; row-gap: .2rem; text-align: left; padding: .7rem 1rem; }
  .cs-trust .vd-trust-i { grid-area: i; }
  .cs-trust .vd-trust-k { grid-area: k; }
  .cs-trust .vd-trust-k br { display: none; }
  .cs-trust .vd-trust-n { grid-area: n; }
}
@media (prefers-reduced-motion: reduce) { .cs-trust::before { animation: none; } }
.vd-how-c mark { background: linear-gradient(var(--canari), var(--canari)) 0 50% / var(--hl, 100%) 100% no-repeat; padding: 0 .12em; margin: 0 -.04em; border-radius: 3px; color: var(--ink); }
.vd .label.vd-q { display: block; text-wrap: balance; }
.vd .label.vd-q::before { display: inline-block; margin-right: .45em; vertical-align: .12em; }

/* ================= Bloc 5 « Pour qui ? » : deux cartes Professionnels / Organisations ================= */
.vd-who-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; }
.vd-who-head .h-lg { max-width: 14em; }
.vd-who .who-ask { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.35rem); line-height: 1.55; color: var(--ink); font-weight: 500; max-width: 28em; }
.vd-who-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(2.5rem, 5vw, 5rem); }
.vd-who-card { position: relative; display: flex; flex-direction: column; min-height: clamp(300px, 26vw, 420px); padding: clamp(1.75rem, 2.8vw, 3rem); background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; isolation: isolate; transition: translate 500ms var(--e-out), box-shadow 500ms var(--e-out); }
.vd-who-card:hover { translate: 0 -6px; box-shadow: 0 34px 60px -34px rgba(12, 24, 40, .38); }
.vd-who-top { display: flex; justify-content: space-between; align-items: flex-start; }
.vd-who-ico { display: grid; place-items: center; flex: none; width: 3.75rem; height: 3.75rem; border-radius: 16px; background: rgba(62, 104, 175, .1); color: var(--bleu); }
.vd-who-ico svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vd-who-n { font: 500 .75rem/1 var(--mono); letter-spacing: .16em; color: var(--mute); }
.vd-who-card h3 { margin-top: auto; padding-top: clamp(2rem, 3vw, 3rem); font: 800 clamp(1.9rem, 3vw, 3.25rem)/1 var(--display); letter-spacing: -.045em; color: var(--ink); }
.vd-who-card > p { margin-top: .75rem; font-size: clamp(1.0625rem, 1.25vw, 1.3rem); color: var(--mute); }
.vd-who-vis { position: absolute; z-index: -1; right: clamp(1.5rem, 2.8vw, 3rem); bottom: clamp(1.5rem, 2.8vw, 3rem); color: rgba(62, 104, 175, .55); }
.vd-who-vis svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.vd-who-solo svg { width: clamp(5rem, 7vw, 7.5rem); height: auto; }
.vd-who .vd-postes { grid-template-columns: repeat(3, clamp(2.25rem, 3vw, 3.25rem)); gap: clamp(8px, .9vw, 14px); }
.vd-who .vd-postes svg { width: 100%; height: auto; }
/* Organisations : carte marine, pour équilibrer et distinguer les deux échelles */
.vd-who-card.is-org { background: var(--ink); border-color: var(--ink); }
.is-org .vd-who-ico { background: var(--canari); color: var(--ink); }
.is-org .vd-who-n { color: rgba(242, 239, 231, .5); }
.is-org h3 { color: var(--white); }
.is-org > p { color: rgba(242, 239, 231, .75); }
.is-org .vd-who-vis { color: rgba(246, 216, 74, .6); }
/* Bandeau « Une solution adaptée à votre métier » */
.vd-who-metier { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); margin-top: clamp(14px, 1.6vw, 24px); padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.8vw, 3rem); background: var(--white); border: 1px solid var(--line); border-radius: 20px; }
.vd-who-metier p { margin: 0; font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.55; color: var(--mute); }
.vd-who-metier b { color: var(--ink); font-weight: 700; }
/* Appel et bouton vidéo, sur une ligne */
.vd-who-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: clamp(1.75rem, 2.5vw, 2.5rem); border-top: 1px solid var(--line); }
.vd-who-cta p { margin: 0; max-width: 40em; font-size: clamp(1.0625rem, 1.3vw, 1.35rem); line-height: 1.5; color: var(--ink); font-weight: 500; }
.vd-who-cta .pill { flex: none; }
@media (max-width: 900px) {
  .vd-who-head { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 640px) {
  .vd-who-cards { grid-template-columns: 1fr; }
  .vd-who-card { min-height: 240px; }
  .vd-who-metier { flex-direction: column; align-items: flex-start; }
  .vd-who-cta { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .vd-who-n { display: none; }
  .vd-who-vis { top: clamp(1.75rem, 2.8vw, 3rem); bottom: auto; }
  .vd-who-solo svg { width: 4.25rem; }
  .vd-who .vd-postes { grid-template-columns: repeat(3, 1.9rem); gap: 7px; }
}
@media (max-width: 760px) { .vd-who-cta .pill { display: none; } }

/* ================= « Pour qui ? » : écrans animés ================= */
.vd-who-vis svg { overflow: visible; }
.vd-who-vis .scr, .vd-who-vis .base, .vd-who-vis .hinge { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Professionnels : un écran qui travaille — lignes écrites, deux pseudonymes, curseur */
.vd-who-solo { color: var(--bleu); }
.vd-who-solo svg { width: clamp(7rem, 10vw, 10.5rem); height: auto; filter: drop-shadow(0 14px 22px rgba(62, 104, 175, .18)); }
.vd-who-solo .scr { fill: rgba(62, 104, 175, .06); animation: whoGlow 6s ease-in-out infinite; }
.vd-who-solo .ln { fill: rgba(12, 24, 40, .16); transform-box: fill-box; transform-origin: 0 50%; animation: whoType 6s var(--e-out) infinite; }
.vd-who-solo .l2 { animation-delay: .25s; } .vd-who-solo .l3 { animation-delay: .5s; } .vd-who-solo .l4 { animation-delay: .75s; }
.vd-who-solo .tag { fill: var(--bleu); transform-box: fill-box; transform-origin: 50% 50%; animation: whoTag 6s var(--e-out) infinite; }
.vd-who-solo .t4 { animation-delay: .35s; }
.vd-who-solo .cur { fill: var(--bleu); animation: whoBlink 1s steps(1) infinite; }
@keyframes whoType { 0%, 4% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes whoTag { 0%, 32% { transform: scale(0); opacity: 0; } 42% { transform: scale(1.15); opacity: 1; } 48%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes whoBlink { 50% { opacity: 0; } }
@keyframes whoGlow { 0%, 30% { fill: rgba(62, 104, 175, .06); } 50%, 85% { fill: rgba(62, 104, 175, .14); } 100% { fill: rgba(62, 104, 175, .06); } }
/* Organisations : les postes s’allument en vague, chacun protégé (bouclier coché), reliés entre eux */
.vd-who .vd-postes { color: rgba(246, 216, 74, .45); }
.vd-who .vd-postes > svg:not(.vd-links) { position: relative; z-index: 1; }
.vd-who .vd-postes > .vd-links { position: absolute; z-index: 0; inset: 22% 12% 34%; width: 76%; height: 44%; }
.vd-postes .vd-links path { fill: none; stroke: rgba(246, 216, 74, .28); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: whoFlow 1.6s linear infinite; }
.vd-postes .scr { fill: var(--ink); animation: whoOn 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * .32s); }
.vd-postes .base { animation: whoBase 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * .32s); }
.vd-postes .sh { fill: var(--canari); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: whoSh 4.8s var(--e-out) infinite; animation-delay: calc(var(--k) * .32s); }
.vd-postes .ck { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: whoCk 4.8s ease infinite; animation-delay: calc(var(--k) * .32s); }
@keyframes whoOn { 0%, 8% { fill: var(--ink); stroke: rgba(246, 216, 74, .45); } 18%, 62% { fill: rgba(246, 216, 74, .14); stroke: var(--canari); } 80%, 100% { fill: var(--ink); stroke: rgba(246, 216, 74, .45); } }
@keyframes whoBase { 0%, 8% { stroke: rgba(246, 216, 74, .45); } 18%, 62% { stroke: var(--canari); } 80%, 100% { stroke: rgba(246, 216, 74, .45); } }
@keyframes whoSh { 0%, 10% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1.12); } 26%, 62% { opacity: 1; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes whoCk { 0%, 20% { opacity: 0; } 28%, 62% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes whoFlow { to { stroke-dashoffset: -16; } }
.vd-who .vd-postes { grid-template-columns: repeat(3, clamp(2.75rem, 3.6vw, 3.9rem)); gap: clamp(10px, 1.1vw, 16px) clamp(12px, 1.3vw, 20px); }
.vd-who .vd-postes > svg:not(.vd-links) { width: 100%; height: auto; }
.vd-who-card:hover .vd-who-solo .scr { fill: rgba(62, 104, 175, .16); }
@media (max-width: 640px) {
  .vd-who-solo svg { width: 5.25rem; }
  .vd-who .vd-postes { grid-template-columns: repeat(3, 2.1rem); gap: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-who-vis *, .vd-postes .vd-links path { animation: none !important; }
  .vd-postes .sh, .vd-postes .ck { opacity: 1; }
}

/* ================= Bloc 7 « Votre objectif » ================= */
.vd-obj { max-width: 62rem; }
.vd-obj-h { margin: 0; }
.vd-obj-k { display: block; margin-bottom: clamp(1rem, 1.8vw, 1.75rem); font: 800 clamp(1.25rem, 1.9vw, 2.1rem)/1 var(--display); letter-spacing: -.02em; color: var(--canari); }
.vd-obj-main { display: block; font: 600 clamp(2.25rem, 4.6vw, 5.75rem)/1.02 var(--display); letter-spacing: -.045em; color: var(--white); text-wrap: balance; }
.vd-obj-sub { margin-top: clamp(1.75rem, 3vw, 3rem); max-width: 34em; font: 300 clamp(1.3rem, 2vw, 2.25rem)/1.35 var(--display); letter-spacing: -.02em; color: rgba(242, 239, 231, .82); }
.vd-obj-sub .brand { font-weight: 800; }
.vd-w { font-weight: 700; color: var(--white); white-space: nowrap; background: linear-gradient(var(--canari), var(--canari)) 0 100% / var(--u, 100%) .12em no-repeat; padding-bottom: .06em; }
/* Les trois mots : aplat jaune plein, texte marine (comme « Gardez le contrôle ») */
.vd-w { color: var(--ink); font-weight: 700; padding: 0 .14em .02em; margin: 0 .02em; border-radius: 3px; background: linear-gradient(var(--canari), var(--canari)) 0 50% / var(--u, 100%) 100% no-repeat; }

/* ================= Bloc 7 : actualités seules, signature avec la preuve ================= */
.vd-news { grid-template-columns: 1fr 1fr; }
.vd-news > div { align-content: center; }
.vd-news .alt-t { font-size: clamp(1.5rem, 2.2vw, 2.4rem); letter-spacing: -.03em; }
.vd-proof { color: var(--canari); font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) { .vd-news { grid-template-columns: 1fr; } }

/* ================= Vérification finale : surlignages jaunes homogènes =================
   Un seul traitement partout : aplat jaune plein, texte marine, mêmes marges et même arrondi. */
.vd .mega .ln2 .lft, .vd .vd-tri b, .vd-pb-tension mark, .vd-how-c mark, .vd-log-s mark, .vd-w {
  border-radius: 3px; padding-left: .12em; padding-right: .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.vd .mega .ln2 .lft { margin-left: -.12em; }
.vd .vd-tri b { margin-left: -.12em; }
.vd-pb-tension mark { padding-top: 0; padding-bottom: 0; font-weight: 700; }
/* Pied de page sans logo LexLabs : liens alignés à gauche */
.vd .ftr-row { justify-content: flex-start; }

/* ================= « Quelle IA » : schéma légendé (piste 1) ================= */
.vd-ia .wrap { display: block; }
.vd-ia-copy { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; }
.vd-ia-copy .vd-ia-p { margin-top: 0; }
.vd-iamap { position: relative; margin: clamp(3rem, 6vw, 6rem) 0 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: center; gap: 0 clamp(1rem, 3vw, 3rem); padding: clamp(3.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem); border-radius: 20px; background: rgba(242, 239, 231, .03); box-shadow: inset 0 0 0 1px rgba(242, 239, 231, .08); }
.vd-iamap-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.vd-iamap-links path { fill: none; stroke: rgba(143, 176, 232, .55); stroke-width: 1.6; stroke-dasharray: 3 6; animation: whoFlow 1.4s linear infinite; }
.vd-iamap-links path.hot { stroke: var(--canari); stroke-width: 2; stroke-dasharray: none; animation: none; }
.vd-iamap-z { position: absolute; top: clamp(1.25rem, 2vw, 1.75rem); margin: 0; font: 500 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.vd-iamap-z.is-l { left: clamp(1.5rem, 3vw, 3rem); color: #8fb0e8; }
.vd-iamap-z.is-r { left: calc(58.33% + clamp(.5rem, 1.5vw, 1.5rem)); color: var(--canari); }
/* Document */
.vd-iamap-doc { position: relative; z-index: 1; padding: 1.25rem 1.35rem; background: var(--white); color: var(--ink); border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.vd-iamap-doc .k { margin: 0; font: 500 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bleu); }
.vd-iamap-doc .h { margin: .4rem 0 .9rem; font: 800 1.1rem/1.2 var(--display); letter-spacing: -.02em; }
.vd-iamap-doc dl { display: grid; gap: .45rem; margin: 0; }
.vd-iamap-doc dl div { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .8125rem; color: #5b6577; }
.vd-iamap-doc dd { margin: 0; font: 500 .72rem/1 var(--mono); color: var(--bleu); background: rgba(62, 104, 175, .12); padding: .35rem .5rem; border-radius: 4px; }
.vd-iamap-doc .f { margin: .9rem 0 0; font-size: .78rem; color: #5b6577; }
/* Frontière au centre */
.vd-iamap-mid { position: relative; align-self: stretch; display: grid; place-items: center; }
.vd-iamap-mid::before { content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(2.5rem, 4vw, 3.75rem)); bottom: calc(-1 * clamp(1rem, 2vw, 2rem)); border-left: 2px dashed rgba(246, 216, 74, .8); }
.vd-iamap .vd-iamap-trust { position: relative; z-index: 1; top: auto; left: auto; transform: none; }
/* Destinations */
.vd-iamap-r { position: relative; z-index: 1; }
.vd-iamap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.85rem, 1.4vw, 1.25rem); }
.vd-iamap-list li { display: flex; align-items: center; gap: 1rem; }
.vd-iamap-list i { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--marine); color: var(--canari); box-shadow: inset 0 0 0 1.5px rgba(246, 216, 74, .75); }
.vd-iamap-list i svg { width: 1.4rem; height: 1.4rem; }
.vd-iamap-list strong { display: block; font: 700 clamp(1.05rem, 1.25vw, 1.25rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--white); }
.vd-iamap-list span { display: block; margin-top: .2rem; font-size: .8125rem; color: rgba(242, 239, 231, .6); }
.vd-iamap-more { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; font-size: .9375rem; color: rgba(242, 239, 231, .75); }
.vd-iamap-more b { color: var(--white); }
@media (max-width: 900px) {
  .vd-ia-copy { grid-template-columns: 1fr; }
  .vd-iamap { grid-template-columns: 1fr; gap: 0; padding: 3rem 1.25rem 1.5rem; }
  .vd-iamap-z.is-r { display: none; }
  .vd-iamap-mid { padding: 2.5rem 0; }
  .vd-iamap-mid::before { top: 0; bottom: 0; }
  .vd-iamap-doc { max-width: 22rem; margin-inline: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vd-iamap-links path { animation: none; } }

/* ================= Actualités : bandeau jaune contrasté ================= */
.vd-news2 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); margin-top: clamp(3rem, 5vw, 5rem); padding: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3.5vw, 3.5rem); background: var(--canari); color: var(--ink); border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(246, 216, 74, .45); }
.vd-news2-ico { display: grid; place-items: center; width: clamp(3.5rem, 5vw, 4.75rem); height: clamp(3.5rem, 5vw, 4.75rem); border-radius: 50%; background: var(--ink); color: var(--canari); }
.vd-news2-ico svg { width: 46%; height: 46%; }
.vd-news2-k { display: block; font: 500 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(12, 24, 40, .65); }
.vd-news2-h { margin: .5rem 0 0; font: 800 clamp(1.9rem, 3.4vw, 3.75rem)/1 var(--display); letter-spacing: -.045em; color: var(--ink); }
.vd-news2-a { display: grid; justify-items: start; gap: .75rem; padding-left: clamp(1.25rem, 3vw, 3rem); border-left: 1.5px solid rgba(12, 24, 40, .2); }
.vd-news2 .pill-ink i { background: var(--canari); color: var(--ink); }
@media (max-width: 760px) {
  .vd-news2 { grid-template-columns: auto 1fr; }
  .vd-news2-a { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 1.25rem; border-top: 1.5px solid rgba(12, 24, 40, .2); }
  .vd-news2 .pill { width: 100%; }
}

/* Vidéo : l'emplacement d'attente disparaît dès que le film est disponible */
.video-cadre[hidden] { display: none !important; }

/* ================= Bandeau des 4 phases : animation légère en boucle =================
   Une lumière parcourt la ligne ; chaque pictogramme s'allume en jaune à son passage. */
.vd-how-steps::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent) -20% 0 / 14% 100% no-repeat, linear-gradient(90deg, var(--canari), #7fa3e0); animation: howRun 6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes howRun { 0% { background-position: -20% 0, 0 0; } 67%, 100% { background-position: 120% 0, 0 0; } }
.vd-how .st svg { animation: howLit 6s ease-in-out infinite; }
.vd-how .st:nth-child(3) svg { animation-delay: 1.33s; }
.vd-how .st:nth-child(5) svg { animation-delay: 2.67s; }
.vd-how .st:nth-child(7) svg { animation-delay: 4s; }
@keyframes howLit { 0%, 2% { background-color: var(--ink); stroke: var(--canari); transform: scale(1); } 6%, 16% { background-color: var(--canari); stroke: var(--ink); transform: scale(1.1); box-shadow: 0 0 0 6px rgba(246, 216, 74, .18); } 24%, 100% { background-color: var(--ink); stroke: var(--canari); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vd-how-steps::after, .vd-how .st svg { animation: none; } }
/* Trois verbes : aplats affinés et lignes aérées, pour qu'ils ne se touchent plus */
.vd .vd-tri { line-height: 1.32; }
.vd .vd-tri span + span { margin-top: .32em; }
.vd .vd-tri b { background-position: 0 55%; animation-name: vdHlTri; }
@keyframes vdHlTri { 60% { color: var(--paper); } to { background-size: 100% 86%; color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .vd .vd-tri b { background-size: 100% 86%; } }
/* Bandeau Actualités : version plus compacte */
.vd-news2 { max-width: 54rem; gap: clamp(1rem, 2vw, 2rem); padding: clamp(1rem, 1.5vw, 1.4rem) clamp(1.25rem, 2.2vw, 2rem); border-radius: 16px; box-shadow: 0 24px 50px -32px rgba(246, 216, 74, .4); }
.vd-news2-ico { width: 2.75rem; height: 2.75rem; }
.vd-news2-k { font-size: .65rem; }
.vd-news2-h { margin-top: .3rem; font-size: clamp(1.3rem, 1.8vw, 1.85rem); letter-spacing: -.035em; }
.vd-news2-a { gap: .5rem; padding-left: clamp(1rem, 2vw, 2rem); }
.vd-news2 .pill-lg { min-height: 2.75rem; padding: .6rem 1.25rem; font-size: .9375rem; }
/* Pied de page : nom PseudonomIA plus présent, signature un cran plus petite */
.vd .vd-slogan { font-size: clamp(1.6rem, 2.7vw, 3.4rem); line-height: 1.08; max-width: 19em; }
.vd-by { margin-bottom: .55em; }
.vd-by .brand { font: 800 clamp(1.6rem, 2.2vw, 2.5rem)/1 var(--display); letter-spacing: -.035em; }

/* ================= Mentions légales / confidentialité : fenêtres de lecture ================= */
.vd .ftr-row .lnk, .legal .lnk { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vd .ftr-row .lnk { color: var(--white); text-decoration: none; }
.vd .ftr-row .lnk:hover { text-decoration: underline; }
.modal-legal { width: min(46rem, calc(100% - 1.5rem)); }
.modal-legal .modal-box { max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
.legal { color: var(--ink); font-size: .9688rem; line-height: 1.65; }
.legal h2 { margin: 1.75rem 0 .5rem; font: 800 1.125rem/1.25 var(--display); letter-spacing: -.02em; }
.legal p, .legal ul { margin: .6rem 0 0; color: #3d4a5e; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .35rem; }
.legal a, .legal .lnk { color: var(--bleu); }
.legal strong { color: var(--ink); }
.legal .badge { display: inline-block; margin-bottom: .5rem; padding: .35rem .7rem; border-radius: 100px; background: rgba(62, 104, 175, .1); color: var(--bleu); font: 500 .72rem/1.2 var(--mono); letter-spacing: .06em; }
.legal ul { list-style: disc; } .legal li::marker { color: var(--bleu); }

/* Hero : chaque pseudonyme transite par le bouclier, qui s'illumine à son passage */
.vd-trust { transition: box-shadow .35s ease; }
.vd-trust .vd-trust-i { transition: transform .35s var(--e-out), box-shadow .35s ease; }
.vd-trust.is-pass { box-shadow: inset 0 0 0 2px var(--canari), 0 0 0 6px rgba(246, 216, 74, .35), 0 24px 50px -22px rgba(0, 0, 0, .55); animation: vdPass .5s ease-out; }
.vd-trust.is-pass .vd-trust-i { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(246, 216, 74, .3); }
@keyframes vdPass { 0% { box-shadow: inset 0 0 0 2px var(--canari), 0 0 0 0 rgba(246, 216, 74, .6), 0 24px 50px -22px rgba(0, 0, 0, .55); } }
/* La lueur retombe d'elle-même entre deux passages */
.vd-trust:not(.is-pass) .vd-trust-i { transform: none; }