/* ============================================================
   VISIODEV — SITE PUBLIC
   Traduction en classes du design inline de la maquette.
   Référence : storage/app/private/design/siteweb.decoded.html
   Chaque bloc porte en commentaire la ligne du décodé dont il vient.
   Aucune valeur en dur : tout passe par var(--vd-*) de tokens.css.
   ============================================================ */

/* ------------------------------------------------------------
   2. RESET — repris du CSS authentique de la maquette (L479-484),
   complété par les règles d'accessibilité de VISIODEV.md §2.3
   (marquées [spec] : elles n'existent pas dans la maquette).
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* VISIODEV.md §2.3 pose `html,body{overflow-x:hidden}`. Cette règle n'existe
   PAS dans la maquette et casse `position:sticky` sur l'en-tête : un ancêtre
   dont l'overflow n'est pas `visible` devient le conteneur de défilement.
   `clip` remplit le même rôle de garde-fou sans créer ce conteneur. */
body{overflow-x:clip}
body{
  margin:0;
  background:var(--vd-bg);
  color:var(--vd-ink);
  font-family:var(--vd-font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;                 /* [spec] */
}
img{max-width:100%;display:block}                    /* [spec] */
a{color:var(--vd-orange);text-decoration:none;transition:color var(--vd-t-fast)}
a:hover{color:var(--vd-orange-pale)}
button,input,textarea,select{font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--vd-ink-32)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--vd-red-60)}
:focus-visible{outline:2px solid var(--vd-orange-soft);outline-offset:2px}   /* [spec] */
h1,h2,h3,h4{margin:0;text-wrap:pretty}               /* [spec] */
p{margin:0;text-wrap:pretty}                         /* [spec] */
/* La maquette n'emploie que des <div> ; le portage utilise du balisage
   sémantique (figure, blockquote, figcaption), dont les marges par défaut du
   navigateur (16px 40px) fausseraient la largeur des cartes. */
figure,blockquote,figcaption{margin:0}
ul{margin:0;padding:0;list-style:none}               /* [spec] */
button{border:0;background:none;color:inherit;cursor:pointer}

/* Lien d'évitement — [spec] §11.4, absent de la maquette */
.vd-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;border-radius:0 0 var(--vd-r-10) 0;
  background:var(--vd-ink);color:var(--vd-bg-panel);font:var(--vd-ui);
}
.vd-skip:focus{left:0}

/* ------------------------------------------------------------
   3. ANIMATIONS — verbatim de la maquette (L485-494).
   ------------------------------------------------------------ */
@keyframes vdHaloPulse{0%,100%{scale:1}50%{scale:1.035}}
@keyframes vdFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes vdFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vdAccIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--vd-t-reveal),transform var(--vd-t-reveal);
}
[data-reveal][data-shown]{opacity:1;transform:none}

[data-zoom]{overflow:hidden}
[data-zoom] img{display:block;transition:transform var(--vd-t-zoom)}
[data-zoom]:hover img{transform:scale(1.06)}

.vd-page-in{animation:vdFadeUp .4s ease both}        /* L519 */

/* ------------------------------------------------------------
   4. UTILITAIRES TYPOGRAPHIQUES
   Une classe par style de la maquette. Ne jamais réécrire une
   police en dur dans une page.
   ------------------------------------------------------------ */
.vd-h1-hero{font:var(--vd-h1-hero);letter-spacing:var(--vd-track-hero);color:var(--vd-ink-warm)}
.vd-h1{font:var(--vd-h1-page);letter-spacing:var(--vd-track-hero)}
.vd-h1-art{font:var(--vd-h1-art);letter-spacing:var(--vd-track-art2)}
.vd-h2-xl{font:var(--vd-h2-xl);letter-spacing:var(--vd-track-hero)}
.vd-h2-l{font:var(--vd-h2-l);letter-spacing:var(--vd-track-h2)}
.vd-h2-m{font:var(--vd-h2-m);letter-spacing:var(--vd-track-h2)}
.vd-h2{font:var(--vd-h2);letter-spacing:var(--vd-track-h2)}
.vd-h2-card{font:var(--vd-h2-card);letter-spacing:var(--vd-track-h2s)}
.vd-h2-34{font:var(--vd-h2-34);letter-spacing:var(--vd-track-h2s)}
.vd-h2-s{font:var(--vd-h2-s);letter-spacing:var(--vd-track-h2s)}
.vd-h3-xl{font:var(--vd-h3-xl);letter-spacing:var(--vd-track-h3)}
.vd-h3-l{font:var(--vd-h3-l);letter-spacing:var(--vd-track-h3)}
.vd-h3-m{font:var(--vd-h3-m)}
.vd-h3{font:var(--vd-h3)}
.vd-h3-s{font:var(--vd-h3-s)}
.vd-h4{font:var(--vd-h4)}

.vd-lede{font:var(--vd-lede-hero);color:var(--vd-ink-62)}      /* L528 — chapô du hero */
.vd-lede-page{font:var(--vd-body-xl);color:var(--vd-ink-62)}   /* L804 — chapô des en-têtes de page */
.vd-body-l{font:var(--vd-body-l);color:var(--vd-ink-62)}
.vd-body{font:var(--vd-body);color:var(--vd-ink-55)}
.vd-body-s{font:var(--vd-body-s);color:var(--vd-ink-55)}
.vd-body-xs{font:var(--vd-body-xs);color:var(--vd-ink-58)}
.vd-body-2xs{font:var(--vd-body-2xs);color:var(--vd-ink-55)}
.vd-body-3xs{font:var(--vd-body-3xs);color:var(--vd-ink-55)}

.vd-eyebrow{font:var(--vd-mono);letter-spacing:var(--vd-track-mono);color:var(--vd-orange-soft);text-transform:uppercase}
.vd-eyebrow--muted{color:var(--vd-ink-38)}       /* L537 */
.vd-eyebrow--faint{color:var(--vd-ink-45)}
.vd-eyebrow--caps{letter-spacing:var(--vd-track-caps)}
.vd-meta{font:var(--vd-mono-s);color:var(--vd-ink-45)}
.vd-tag{font:var(--vd-mono-s);color:var(--vd-orange-soft)}     /* L580 */

/* ------------------------------------------------------------
   5. GRILLE ET SECTIONS
   Les paddings verticaux varient d'une section à l'autre dans la
   maquette : 88px (L545), 92px (L570), 96px (L702). D'où les
   modificateurs plutôt qu'une valeur unique.
   ------------------------------------------------------------ */
.vd-section{padding:0 var(--vd-gutter) 96px;max-width:var(--vd-max);margin:0 auto}
.vd-section--top{padding-top:88px}               /* L545 */
.vd-section--pb88{padding-bottom:88px}           /* L559 */
.vd-section--pb92{padding-bottom:92px}           /* L570 */
.vd-section--tight{padding-bottom:56px}
.vd-section--flush{max-width:none;margin:0}
.vd-section--flat{padding-top:0}
.vd-section--pt56{padding-top:56px}                                                                       /* L1004 */
.vd-section--pt64{padding-top:64px}                                                                       /* L973 */
.vd-section--pt72{padding-top:72px}                                                                       /* L814 */
.vd-section--pt76{padding-top:76px}                                                                       /* L1740 */
.vd-section--pb0{padding-bottom:0}
.vd-section--pb40{padding-bottom:40px}                                                                    /* L1474 */
.vd-section--pb104{padding-bottom:104px}                                                                  /* L727 */                                                                    /* L1474 */
.vd-section--pt28{padding-top:28px}                                                                       /* L1509 */
.vd-sortlabel{font:var(--vd-mono-xs);color:var(--vd-ink-35);white-space:nowrap}                           /* L1500 */
.vd-article-hero{width:100%;height:360px;object-fit:cover;border-radius:var(--vd-r-18);margin-top:8px}
.vd-aside{position:sticky;top:120px;align-self:start}
.vd-aside__k{font:var(--vd-mono-s);color:var(--vd-ink-42);margin-bottom:8px}
.vd-aside__k--spaced{margin-top:26px}
.vd-aside__v{font:var(--vd-ui-m-lh);color:var(--vd-ink)}
.vd-aside__role{margin-top:4px;font:var(--vd-body-12);color:var(--vd-ink-50)}
.vd-section__title{margin:0 0 40px}                                                                       /* L684 */
/* Bandeau pleine largeur à filet bas (logos technologiques) — L536 */
.vd-section--band{max-width:none;margin:0;padding:34px var(--vd-gutter) 56px;border-bottom:1px solid var(--vd-line-7)}
.vd-band__eyebrow{margin:0 0 24px;text-align:center}                                                      /* L537 */

.vd-shell{max-width:var(--vd-max);margin:0 auto}


.vd-grid{display:grid;gap:var(--vd-gap)}
.vd-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vd-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vd-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.vd-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}

/* Splits éditoriaux — ratios exacts de la maquette */
.vd-split{display:grid;gap:0}
.vd-split--1-105{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.vd-split--1-11 {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.vd-split--115-1{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.vd-split--1-1  {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vd-split--1-15 {grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px;align-items:start}  /* L703 */
.vd-split--gap56{gap:56px}                                                                                /* L1102 */
.vd-split--1-125{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}          /* L2026 */
.vd-split--17-1 {grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px;align-items:start}
.vd-split__col{min-width:0}

/* En-tête de section : titre à gauche, phrase ou lien à droite */
.vd-sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}  /* L544 */
.vd-sechead--baseline{align-items:baseline;margin-bottom:28px}                                            /* L571 */
.vd-sechead--wrap{flex-wrap:wrap;margin-bottom:40px}                                                      /* L590 */
.vd-sechead--mb40{margin-bottom:40px}                                                                     /* L616 */
.vd-sechead--mb32{margin-bottom:32px}                                                                     /* L1839 */
.vd-sechead--mb36{margin-bottom:36px}                                                                     /* L2006 */
.vd-sechead__stack{min-width:0;max-width:760px}                                                           /* L591 */
.vd-sechead__stack .vd-sechead__note{margin-top:16px;max-width:520px}
.vd-sechead__cta{font:var(--vd-ui-m);color:var(--vd-orange-soft);white-space:nowrap;padding-bottom:6px;transition:color var(--vd-t-fast)}
.vd-sechead__cta:hover{color:var(--vd-orange-pale)}                                            /* L571 */
.vd-sechead__note{margin:0;max-width:340px;font:var(--vd-body);color:var(--vd-ink-55)}
.vd-sechead__note--l{max-width:360px;font:var(--vd-body-s)}                                               /* L618 */
.vd-sechead__note--xl{max-width:380px;font:var(--vd-body-s)}                                              /* L1032 */
.vd-sechead--block{margin-bottom:40px}                                                                    /* L1058 */
.vd-sechead__lede{margin:14px 0 0;max-width:620px;font:var(--vd-body-m);color:var(--vd-ink-55)}           /* L1060 */
.vd-block__title{margin:0 0 18px}
.vd-block__title--l{margin:0 0 32px}                                                                      /* L837 */
.vd-block__title--m{margin:0 0 28px}                                                                      /* L1761 */                    /* L546 */
.vd-sechead__link{font:var(--vd-nav);color:var(--vd-orange-soft);cursor:pointer;white-space:nowrap}       /* L573 */

/* ------------------------------------------------------------
   6. BARRE UTILITAIRE, EN-TÊTE, MENU MOBILE
   ------------------------------------------------------------ */
/* Bandeau contact — L499 */
.vd-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px var(--vd-gutter);
  border-bottom:1px solid var(--vd-line-6);
  font:var(--vd-mono);color:var(--vd-ink-42);
}

/* Barre de progression de lecture — L504 */
.vd-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.vd-progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--vd-orange),var(--vd-red));box-shadow:var(--vd-shadow-bar)}

/* En-tête collant — L506. Le seuil de bascule est y > 40 (L2328). */
.vd-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--vd-gutter);
  background:var(--vd-bg-86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vd-line-7);
  box-shadow:none;
  transition:padding var(--vd-t-slow),background var(--vd-t-slow),box-shadow var(--vd-t-slow);
}
.vd-header[data-scrolled]{
  padding:11px var(--vd-gutter);
  background:var(--vd-bg-96);
  box-shadow:var(--vd-shadow-header);
}
.vd-header__logo{display:flex;align-items:center;gap:10px;flex:none}
.vd-header__logo img{height:26px;width:auto}

.vd-nav{display:flex;gap:2px;flex-wrap:nowrap;min-width:0}       /* L510 */
.vd-nav__item{
  padding:8px 14px;border-radius:var(--vd-r-8);
  font:var(--vd-nav);color:var(--vd-ink-60);background:transparent;
  white-space:nowrap;flex:none;
  transition:color var(--vd-t-fast),background var(--vd-t-fast);
}
.vd-nav__item:hover{color:var(--vd-ink)}
.vd-nav__item[aria-current="page"]{color:var(--vd-ink);background:var(--vd-line-7)}

/* Bouton hamburger — [spec] §2.6, aucune référence dans la maquette */
.vd-burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--vd-r-12);border:1px solid var(--vd-line-16);
  background:var(--vd-surface-5);cursor:pointer;
}
.vd-burger__bars{display:flex;flex-direction:column;gap:5px;width:18px}
.vd-burger__bars span{display:block;height:2px;border-radius:2px;background:var(--vd-ink)}

/* Panneau plein écran mobile — [spec] §2.6, aucune référence dans la maquette */
.vd-drawer{
  position:fixed;inset:0;z-index:80;
  display:none;flex-direction:column;overflow:auto;
  padding:16px 20px 34px;
  background:var(--vd-bg-985);backdrop-filter:blur(10px);
  animation:vdFadeUp .22s ease both;
}
.vd-drawer[data-open]{display:flex}
.vd-drawer__head{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:24px}
.vd-drawer__close{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--vd-r-12);border:1px solid var(--vd-line-16);
  font:var(--vd-close);color:var(--vd-ink);background:none;cursor:pointer;
}
.vd-drawer__list{display:flex;flex-direction:column;gap:2px;flex:none}
.vd-drawer__item{
  padding:16px 14px;border-radius:var(--vd-r-12);
  font:var(--vd-h3-m);letter-spacing:var(--vd-track-h3);
  color:var(--vd-ink-60);
}
.vd-drawer__item[aria-current="page"]{color:var(--vd-ink);background:var(--vd-line-7)}
.vd-drawer__cta{
  flex:none;margin-top:24px;padding:18px 22px;border-radius:var(--vd-r-12);
  background:var(--vd-ink);color:var(--vd-bg-panel);text-align:center;font:var(--vd-ui-l);
}
.vd-drawer__contact{
  margin-top:auto;padding-top:32px;display:flex;flex-direction:column;gap:7px;
  font:var(--vd-mono-lh);color:var(--vd-ink-45);
}

/* ------------------------------------------------------------
   7. BOUTONS
   ------------------------------------------------------------ */
.vd-btn{
  display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;cursor:pointer;border:0;
  transition:transform var(--vd-t-fast),box-shadow var(--vd-t-fast),background var(--vd-t-fast);
}
/* Blanc plein — CTA principal (L530) */
.vd-btn--solid{padding:15px 28px;border-radius:var(--vd-r-pill);background:var(--vd-ink);color:var(--vd-bg-panel);font:var(--vd-ui-l)}
.vd-btn--solid:hover{transform:translateY(-2px)}
/* Contour clair — CTA secondaire (L531) */
.vd-btn--ghost{padding:15px 28px;border-radius:var(--vd-r-pill);border:1px solid var(--vd-line-20);background:none;color:var(--vd-ink);font:var(--vd-ui-l)}
.vd-btn--ghost:hover{background:var(--vd-line-8)}
/* Contour compact, angles doux (L707) */
.vd-btn--outline{padding:12px 20px;border-radius:var(--vd-r-10);border:1px solid var(--vd-line-20);background:none;color:var(--vd-ink);font:var(--vd-ui)}
.vd-btn--outline:hover{background:var(--vd-line-7)}
/* Rouge plein — envoi de formulaire (L768) */
.vd-btn--red{padding:16px 28px;border-radius:var(--vd-r-11);background:var(--vd-red);color:var(--vd-on-red);font:var(--vd-ui-l)}
.vd-btn--red:hover{transform:translateY(-2px);box-shadow:var(--vd-shadow-red)}
/* En-tête, angles doux (L515) */
.vd-btn--header{padding:11px 20px;border-radius:var(--vd-r-9);background:var(--vd-ink);color:var(--vd-bg-panel);font:var(--vd-ui)}
.vd-btn--header:hover{transform:translateY(-1px);box-shadow:var(--vd-shadow-cta)}
/* Sur fond rouge */
.vd-btn--on-red{padding:14px 24px;border-radius:var(--vd-r-pill);background:var(--vd-on-red);color:var(--vd-red-soft);font:var(--vd-ui-m)}
/* CTA de bas de page, plus grand (L784-785) */
.vd-btn--xl{padding:17px 32px;border-radius:var(--vd-r-pill);font:var(--vd-ui-xl)}
.vd-btn--xl.vd-btn--solid{background:var(--vd-on-red);color:var(--vd-red-soft)}
.vd-btn--xl.vd-btn--solid:hover{transform:translateY(-2px);box-shadow:var(--vd-shadow-cta-lg)}
.vd-btn--xl.vd-btn--ghost{border-color:var(--vd-line-45);color:var(--vd-on-red)}
.vd-btn--xl.vd-btn--ghost:hover{background:var(--vd-line-14)}
/* Couleur de texte au survol.
   Deux raisons à ce bloc :
   1. les boutons sont des <a>, et la règle globale `a:hover` (0,1,1) l'emporte
      sur les variantes `.vd-btn--x` (0,1,0) : sans cela le texte vire à
      l'orange pâle sur tous les boutons. Le chaînage `.vd-btn.vd-btn--x`
      (0,3,0) reprend la main.
   2. [écart demandé] la maquette ne change PAS la couleur du texte au survol
      (elle ne joue que sur transform, ombre ou fond). Le rouge de marque au
      survol est une demande explicite du client, hors maquette. */
.vd-btn.vd-btn--solid:hover,
.vd-btn.vd-btn--ghost:hover,
.vd-btn.vd-btn--header:hover,
.vd-btn.vd-btn--outline:hover{color:var(--vd-red)}

/* Les variantes posées sur fond rouge gardent leur propre encre. */
.vd-btn.vd-btn--red:hover{color:var(--vd-on-red)}
.vd-btn.vd-btn--on-red:hover{color:var(--vd-red-soft)}
.vd-btn.vd-btn--xl.vd-btn--solid:hover{color:var(--vd-red-soft)}
.vd-btn.vd-btn--xl.vd-btn--ghost:hover{color:var(--vd-on-red)}

/* Rangée de boutons */
.vd-btn-row{display:flex;gap:12px}                       /* L529 */
.vd-btn-row--center{justify-content:center;gap:14px}     /* L783 */
.vd-btn-row--stack{flex-direction:column;margin-top:12px}

/* ------------------------------------------------------------
   8. CARTES
   ------------------------------------------------------------ */
/* Carte standard (projet, article, témoignage) — L577.
   La maquette utilise des <div role="button"> ; le portage utilise de vrais
   <a>, d'où le color:inherit qui neutralise la couleur de lien globale. */
.vd-card{
  border-radius:var(--vd-r-16);overflow:hidden;
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  color:var(--vd-ink);
  transition:transform var(--vd-t-med),border-color var(--vd-t-med);
}
.vd-card:hover{color:var(--vd-ink)}
.vd-card--link{cursor:pointer}
.vd-card--link:hover{transform:translateY(-4px);border-color:var(--vd-line-22)}
.vd-card__media{width:100%;height:180px;object-fit:cover}
.vd-card__media--l{height:190px}
.vd-card__media--s{height:160px}
.vd-card__media--xs{height:150px}
.vd-card__body{padding:20px}
.vd-card__body--l{padding:22px}
.vd-card__tag{margin-bottom:10px}
.vd-card__title{margin:0 0 8px;font:var(--vd-h3-s)}
.vd-card__text{margin:0;font:var(--vd-body-2xs);color:var(--vd-ink-55)}
.vd-card__text--spaced{margin:0 0 16px}   /* [relevé] L1522 — le chapô précède la signature */

/* Emplacement d'image vide — les photos de la maquette sont des
   banques d'images et ne sont pas portées (VISIODEV.md §4.5, §D.3).
   Le cadre conserve la hauteur exacte de la maquette. */
.vd-media-empty{background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}

/* Carte de service / rubrique — L550 */
.vd-tile{
  padding:28px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  color:var(--vd-ink);
  transition:transform var(--vd-t-med),border-color var(--vd-t-med);
}
.vd-tile--link{cursor:pointer}
.vd-tile--link:hover{transform:translateY(-4px);color:var(--vd-ink)}
.vd-tile--accent{background:linear-gradient(165deg,var(--vd-red-deep-22),var(--vd-surface-3));border-color:var(--vd-red-28)}
.vd-tile__num{font:var(--vd-mono);margin-bottom:44px;color:var(--vd-ink-40)}
.vd-tile--accent .vd-tile__num{color:var(--vd-red)}
.vd-tile__title{margin:0 0 10px;font:var(--vd-h3-m)}
.vd-tile__text{margin:0;font:var(--vd-body-xs);color:var(--vd-ink-60)}

/* Panneau large */
.vd-panel{padding:44px;border-radius:var(--vd-r-20);background:var(--vd-surface-28);border:1px solid var(--vd-line-9)}
.vd-panel--phases{margin-top:76px}   /* L836 */
.vd-panel--soft{background:var(--vd-surface-3);border-color:var(--vd-line-11);padding:56px 48px;border-radius:var(--vd-r-22);position:relative;overflow:hidden}

/* Bloc rouge éditorial — L659 */
.vd-redblock{min-width:0;padding:48px 44px;background:linear-gradient(150deg,var(--vd-red-deep),var(--vd-red-dark) 62%,var(--vd-red-darkest))}
.vd-redblock__eyebrow{font:var(--vd-mono);color:var(--vd-on-red-72);margin-bottom:18px}
.vd-redblock__title{margin:0 0 14px;font:var(--vd-h2-card);letter-spacing:var(--vd-track-h2s);color:var(--vd-on-red)}
.vd-redblock__text{margin:0 0 28px;font:var(--vd-body-s-loose);color:var(--vd-on-red-82)}

/* Cadre média des splits */
.vd-media-frame{position:relative;min-width:0;min-height:420px}
.vd-media-frame--s{min-height:380px}
.vd-media-frame--xs{min-height:300px}
.vd-media-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Conteneur d'encadré à filet rouge */
.vd-frame-red{border-radius:var(--vd-r-22);overflow:hidden;border:1px solid var(--vd-red-28)}

/* ------------------------------------------------------------
   9. BANDEAUX DE STATISTIQUES — L560
   ------------------------------------------------------------ */
.vd-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--vd-line-9);border:1px solid var(--vd-line-9);
  border-radius:var(--vd-r-18);overflow:hidden;
}
.vd-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd-stats__cell{padding:34px 24px;background:var(--vd-bg);text-align:center}
.vd-stats__value{font:var(--vd-stat)}
.vd-stats__label{margin-top:8px;font:var(--vd-body-3xs-xt);color:var(--vd-ink-50)}

/* Résultats à l'intérieur d'un bloc rouge (3 colonnes, filets latéraux) */
.vd-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 0;border-top:1px solid var(--vd-line-22);border-bottom:1px solid var(--vd-line-22);margin-bottom:28px}
.vd-results__cell{min-width:0;padding:0 14px;text-align:center}
.vd-results__cell + .vd-results__cell{border-left:1px solid var(--vd-line-22)}

/* Carte de session à venir — L593-611 */
.vd-session{
  min-width:0;display:flex;flex-direction:column;
  padding:26px 28px 22px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  color:var(--vd-ink);
  transition:transform var(--vd-t-med),border-color var(--vd-t-med);
}
.vd-session:hover{transform:translateY(-4px);border-color:var(--vd-line-22);color:var(--vd-ink)}
.vd-session__date{display:flex;align-items:flex-end;gap:9px;margin-bottom:20px}
.vd-session__day{font:700 44px/.9 var(--vd-font-display);letter-spacing:var(--vd-track-h2);color:var(--vd-peach)}
.vd-session__month{font:var(--vd-mono);color:var(--vd-ink-50);padding-bottom:4px}
.vd-session__title{margin:0 0 7px;font:var(--vd-h3-s)}
.vd-session__place{margin:0 0 20px;font:var(--vd-body-3xs-t);color:var(--vd-ink-45)}
.vd-session__foot{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--vd-line-8);
}
.vd-session__seats{font:500 13.5px/1 var(--vd-font-mono);color:var(--vd-ink-50)}
.vd-session__seats--low{font-weight:600;color:var(--vd-orange-mid)}
.vd-session__seats--full{font-weight:600;color:var(--vd-ink-45)}
.vd-session__cta{font:var(--vd-ui-s);color:var(--vd-orange-soft);white-space:nowrap}

/* Tuile d'audience — L621-628 */
.vd-audience{
  display:flex;flex-direction:column;padding:28px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  color:var(--vd-ink);
  transition:transform var(--vd-t-med),border-color var(--vd-t-med);
}
.vd-audience:hover{transform:translateY(-4px);border-color:var(--vd-red-40);color:var(--vd-ink)}
.vd-audience--accent{background:linear-gradient(165deg,var(--vd-red-deep-20),var(--vd-surface-3));border-color:var(--vd-red-28)}
.vd-audience--span3{grid-column:span 3}
.vd-audience--span2{grid-column:span 2}
.vd-audience__tag{font:var(--vd-mono-s);color:var(--vd-orange-soft);margin-bottom:18px}
.vd-audience__title{margin:0 0 10px;font:var(--vd-h3-m)}
.vd-audience__text{margin:0 0 20px;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}
.vd-audience__link{margin-top:auto;font:var(--vd-nav-s);color:var(--vd-ink-72)}

/* Bloc « Comment nous travaillons » — L633-651 */
.vd-method{padding:52px 44px;border-radius:var(--vd-r-22);background:var(--vd-surface-28);border:1px solid var(--vd-line-9)}
.vd-method__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.vd-method__step{position:relative;padding:0 24px 0 0}
.vd-method__rule{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.vd-method__dot{width:12px;height:12px;border-radius:var(--vd-r-circle);flex:none;background:var(--vd-red)}
.vd-method__dot--faded{background:var(--vd-red-72)}   /* [relevé] L3103 — jalons suivants de la frise */
.vd-method__line{height:1px;flex:1;background:var(--vd-line-12)}
.vd-method__note{margin:0;font:var(--vd-mono-m);color:var(--vd-ink-45)}                                    /* L636 */
.vd-method__meta{font:var(--vd-mono);color:var(--vd-orange-soft);margin-bottom:10px}
.vd-method__title{margin:0 0 10px;font:var(--vd-h3)}
.vd-method__text{margin:0;font:var(--vd-body-2xs);color:var(--vd-ink-55);max-width:230px}

/* Étude de cas — L655-680 */
.vd-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);border-radius:var(--vd-r-22);overflow:hidden;border:1px solid var(--vd-red-28)}
.vd-case__media{position:relative;min-width:0;min-height:420px}
.vd-case__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vd-case__title{margin:0 0 26px}                                                                          /* L661 */
.vd-case__cta{padding:13px 22px}                                                                          /* L679 */
.vd-case__steps{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
.vd-case__step-k{font:600 12px/1 var(--vd-font-mono);color:var(--vd-peach-2);margin-bottom:7px}
.vd-case__step-v{margin:0;font:var(--vd-body-15-165);color:var(--vd-on-red-84)}
.vd-case__value{font:var(--vd-stat-m);color:var(--vd-on-red);white-space:nowrap}
.vd-case__label{margin-top:9px;font:var(--vd-body-13);color:var(--vd-on-red-72)}

/* Carte de témoignage — L687-698 */
.vd-quote{
  display:flex;flex-direction:column;padding:32px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
}
.vd-quote__mark{font:var(--vd-stat-s6);color:var(--vd-red);margin-bottom:18px}
.vd-quote__text{margin:0 0 28px;font:var(--vd-body-s-loose);color:var(--vd-ink-75)}
.vd-quote__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:22px;border-top:1px solid var(--vd-line-8)}
.vd-quote__avatar{width:42px;height:42px;flex:none;border-radius:var(--vd-r-circle);object-fit:cover}
.vd-quote__name{font:var(--vd-ui-m-lh)}
.vd-quote__role{margin-top:4px;font:var(--vd-body-12);color:var(--vd-ink-50)}

/* En-tête de page intérieure : contenu — L957-971 */
.vd-pagehead__inner{position:relative;max-width:var(--vd-max);margin:0 auto}
.vd-pagehead__eyebrow{font:var(--vd-mono);letter-spacing:var(--vd-track-mono);color:var(--vd-orange-soft);margin-bottom:22px}
.vd-pagehead__title{max-width:820px}
.vd-pagehead__lede{margin:24px 0 0;max-width:620px}
.vd-pagehead__stats{margin-top:48px}
.vd-stats--proof .vd-stats__value{font:var(--vd-stat-l)}

/* Projet vedette — L974-1002 */
.vd-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-radius:var(--vd-r-22);overflow:hidden;border:1px solid var(--vd-red-28);
  color:var(--vd-ink);transition:border-color var(--vd-t-med);
}
.vd-feature:hover{border-color:var(--vd-red-55);color:var(--vd-ink)}
.vd-feature__media{position:relative;min-width:0;min-height:420px}
.vd-feature__media img,.vd-feature__media > div{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vd-feature__title{margin:0 0 14px}
.vd-feature__cta{padding:13px 22px}

/* Filtres segmentés — L1005-1009 */
.vd-segmented{display:flex;justify-content:center;margin-bottom:40px}
.vd-segmented__group{
  display:flex;gap:4px;padding:5px;border-radius:var(--vd-r-14);flex-wrap:wrap;justify-content:center;
  background:var(--vd-surface-5);border:1px solid var(--vd-line-10);
}
.vd-segmented__item{
  padding:14px 30px;border-radius:var(--vd-r-10);cursor:pointer;white-space:nowrap;
  font:var(--vd-ui-l);background:transparent;color:var(--vd-ink-62);
  transition:background var(--vd-t-fast),color var(--vd-t-fast);
}
.vd-segmented__item:hover{color:var(--vd-ink)}
/* Actif = rouge de marque, pas blanc (décodé L2797-2798 et L2945-2946) */
.vd-segmented__item[aria-pressed="true"]{background:var(--vd-red);color:var(--vd-on-red)}
.vd-rule{margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--vd-line-8)}

/* Étiquettes et pied des cartes de projet — L1011-1020 */
.vd-card__tags{display:flex;gap:7px;margin-bottom:12px}
.vd-tagchip{padding:5px 10px;border-radius:var(--vd-r-6);font:var(--vd-mono-xs);background:var(--vd-surface-5);color:var(--vd-ink-55)}
.vd-tagchip--accent{background:var(--vd-red-14);border:1px solid var(--vd-red-30);color:var(--vd-orange-mid)}
.vd-card__title--l{margin:0 0 8px;font:var(--vd-h3-19)}
.vd-card__foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--vd-line-7);
}
.vd-card__metric{font:var(--vd-mono-135);color:var(--vd-ink)}
.vd-card__more{font:var(--vd-nav-xs);color:var(--vd-orange-soft);white-space:nowrap;flex:none}

/* Fiche projet — L1079-1148 */
.vd-back{display:inline-flex;font:var(--vd-nav-s);color:var(--vd-ink-50);margin-bottom:32px;transition:color var(--vd-t-fast)}
.vd-back:hover{color:var(--vd-ink)}
.vd-tagrow{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.vd-tagchip--l{padding:6px 12px;border-radius:var(--vd-r-7);font:var(--vd-mono-s)}
.vd-case-lede{margin:22px 0 40px;max-width:720px;font:var(--vd-body-l);color:var(--vd-ink-62)}
.vd-case-hero{width:100%;height:400px;object-fit:cover;border-radius:var(--vd-r-18)}
.vd-stats--boxed{margin-top:24px}
.vd-stats__cell--left{padding:28px;text-align:left;min-width:0}
.vd-stats__value--l{font:var(--vd-h2-card)}
.vd-prose-p{font:var(--vd-body-m);color:var(--vd-ink-62)}
.vd-steps{display:flex;flex-direction:column;gap:14px}
.vd-steps__item{display:flex;align-items:baseline;gap:16px}
.vd-steps__num{flex:none;font:var(--vd-mono);color:var(--vd-orange-soft)}
.vd-steps__text{margin:0;font:var(--vd-body-m);color:var(--vd-ink-62)}
.vd-clientquote{
  margin:0;padding:36px 40px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
}
.vd-clientquote__text{margin:0 0 22px;font:var(--vd-body-s-loose);color:var(--vd-ink-75)}
.vd-clientquote__who{display:flex;align-items:center;gap:12px}

/* Panneau de devis rapide — L728-775 */
.vd-quick{position:relative;overflow:hidden;padding:56px 48px;border-radius:var(--vd-r-22);background:var(--vd-surface-3);border:1px solid var(--vd-line-11)}
.vd-quick__halo{
  position:absolute;right:-140px;top:-160px;width:520px;height:520px;border-radius:var(--vd-r-circle);
  background:radial-gradient(circle,var(--vd-halo-red-34),transparent 68%);filter:blur(30px);
}
.vd-quick__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.vd-quick__title{margin:0 0 16px;font:var(--vd-h2-m8);letter-spacing:var(--vd-track-h2)}
.vd-quick__lede{margin:0 0 24px;font:var(--vd-body-m-165);color:var(--vd-ink-60)}
.vd-quick__points{display:flex;flex-direction:column;gap:10px;font:var(--vd-body-xs-tight);color:var(--vd-ink-60)}
.vd-quick__point{display:flex;gap:10px}

/* Barre de filtres collante des articles — L1490-1507.
   Pleine largeur, pas contrainte à la colonne de contenu. */
.vd-artbar{
  position:sticky;top:73px;z-index:40;padding:11px var(--vd-gutter);
  background:var(--vd-bg-92);backdrop-filter:blur(14px);
  border-top:1px solid var(--vd-line-7);border-bottom:1px solid var(--vd-line-7);
}
.vd-artbar__inner{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;max-width:var(--vd-max);margin:0 auto}
.vd-artbar__search{
  width:230px;flex:none;padding:11px 16px;border-radius:var(--vd-r-10);
  background:var(--vd-surface-5);border:1px solid var(--vd-line-12);
  color:var(--vd-ink);font:var(--vd-body-2xs-flat);
}
.vd-artbar__themes{
  display:flex;gap:7px;flex-wrap:nowrap;overflow-x:auto;flex:1;min-width:0;
  mask-image:linear-gradient(90deg,var(--vd-mask) 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,var(--vd-mask) 90%,transparent);
}
.vd-artbar__sort{display:flex;align-items:center;gap:10px;flex:none}
.vd-sortgroup{display:flex;gap:2px;padding:3px;border-radius:var(--vd-r-9);background:var(--vd-surface-5);border:1px solid var(--vd-line-10)}
.vd-sortgroup__item{
  padding:8px 13px;border-radius:var(--vd-r-7);cursor:pointer;white-space:nowrap;
  font:var(--vd-ui-125);color:var(--vd-ink-50);
  transition:background var(--vd-t-fast),color var(--vd-t-fast);
}
/* Le tri n'est pas une chip : fond translucide, encre pleine (décodé L3040-3041) */
.vd-sortgroup__item[aria-pressed="true"]{background:var(--vd-line-14);color:var(--vd-ink)}

/* Dossiers, ressources, auteurs, newsletter — L1537-1610 */
.vd-dossier{display:flex;flex-direction:column;padding:32px;border-radius:var(--vd-r-18);background:var(--vd-surface-3);border:1px solid var(--vd-line-9);color:var(--vd-ink);transition:transform var(--vd-t-med),border-color var(--vd-t-med)}
.vd-dossier:hover{transform:translateY(-4px);border-color:var(--vd-red-40);color:var(--vd-ink)}
.vd-dossier__num{font:var(--vd-mono-s);color:var(--vd-orange-soft);margin-bottom:16px}
.vd-dossier__title{margin:0 0 12px;font:var(--vd-h3-l-s)}
.vd-dossier__text{margin:0 0 20px;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}
.vd-dossier__more{margin-top:auto;font:var(--vd-nav-s);color:var(--vd-orange-soft)}

.vd-resource{display:flex;flex-direction:column;padding:30px;border-radius:var(--vd-r-18);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-resource__format{font:var(--vd-mono-s);color:var(--vd-ink-45);margin-bottom:14px}
.vd-resource__title{margin:0 0 10px;font:var(--vd-h3)}
.vd-resource__text{margin:0 0 22px;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}
.vd-resource__foot{margin-top:auto}

/* Cartes d'auteur — L1588-1596. Elles filtrent la grille et reprennent les
   constantes CHIP_ON / CHIP_OFF (décodé L3045 : ...this.chip(...)). */
.vd-author{
  padding:26px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-4);border:1px solid var(--vd-line-13);
  transition:transform var(--vd-t-med);
}
.vd-author:hover{transform:translateY(-4px)}
.vd-author__name{margin:0 0 6px;font:var(--vd-h4-a);color:var(--vd-ink-62)}
.vd-author--active{background:var(--vd-red);border-color:var(--vd-red)}
.vd-author--active .vd-author__name{color:var(--vd-on-red)}
.vd-author__photo{width:44px;height:44px;flex:none;margin-bottom:18px;border-radius:var(--vd-r-circle);object-fit:cover}
.vd-author__role{font:var(--vd-body-12-14);color:var(--vd-ink-50);margin-bottom:14px}
.vd-author__count{font:var(--vd-mono);color:var(--vd-orange-soft)}

.vd-news{
  display:flex;align-items:center;gap:24px;padding:32px 36px;border-radius:var(--vd-r-18);
  background:linear-gradient(120deg,var(--vd-red-deep-28),var(--vd-surface-3));
  border:1px solid var(--vd-red-28);flex-wrap:wrap;
}
.vd-news__text{flex:1;min-width:240px}
.vd-news__title{margin:0 0 6px;font:var(--vd-h3-l-s)}
.vd-news__note{margin:0;font:var(--vd-body-xs);color:var(--vd-ink-60)}
.vd-news__field{width:280px;flex:none;padding:14px 16px;border-radius:var(--vd-r-10);background:var(--vd-field-bg-40);border:1px solid var(--vd-line-14);color:var(--vd-ink);font:var(--vd-body-15-flat)}
.vd-news__btn{padding:14px 24px;border-radius:var(--vd-r-10);background:var(--vd-ink);color:var(--vd-bg-panel);font:var(--vd-ui);white-space:nowrap;flex:none}

/* --- Page Formations --- */

/* Onglets de public — L1187-1191 */
.vd-segmented__item--l{padding:15px 42px;font:var(--vd-ui-16-12);text-align:center}

/* Barre de filtres par niveau — L1195-1202 */
.vd-filterbar{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:18px;border-bottom:1px solid var(--vd-line-8);
}
.vd-filterbar__count{font:var(--vd-body-3xs-t);color:var(--vd-ink-45)}
.vd-pill-row{display:flex;gap:8px;flex-wrap:wrap}
.vd-pill{
  padding:9px 16px;border-radius:var(--vd-r-pill);cursor:pointer;white-space:nowrap;
  font:var(--vd-ui-13);background:var(--vd-surface-4);color:var(--vd-ink-62);
  border:1px solid var(--vd-line-13);
  transition:background var(--vd-t-fast),color var(--vd-t-fast),border-color var(--vd-t-fast);
}
.vd-pill[aria-pressed="true"]{background:var(--vd-red);color:var(--vd-on-red);border-color:var(--vd-red)}

/* Carte de formation — L1205-1232 */
.vd-course{
  display:flex;flex-direction:column;border-radius:var(--vd-r-18);overflow:hidden;
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);color:var(--vd-ink);
  transition:transform var(--vd-t-med),border-color var(--vd-t-med);
}
.vd-course:hover{transform:translateY(-4px);border-color:var(--vd-line-22);color:var(--vd-ink)}
.vd-course--hot{border-color:var(--vd-red-28)}
.vd-course__media{position:relative;height:150px}
.vd-course__media img,.vd-course__media > .vd-media-empty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vd-course__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--vd-panel-78),var(--vd-panel-12) 52%,var(--vd-panel-55))}
.vd-course__badges{position:absolute;left:18px;right:18px;top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.vd-course__level{padding:6px 11px;border-radius:var(--vd-r-7);background:var(--vd-panel-66);backdrop-filter:blur(6px);font:var(--vd-mono-xs);color:var(--vd-ink-85)}
.vd-course__hot{padding:5px 10px;border-radius:var(--vd-r-pill);background:var(--vd-red);font:var(--vd-ui-11);color:var(--vd-on-red)}
.vd-course__body{display:flex;flex-direction:column;flex:1;padding:26px 30px 30px}
.vd-course__title{margin:0 0 10px;font:var(--vd-h3-l-s)}
.vd-course__text{margin:0 0 20px;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}
.vd-check{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.vd-check__item{display:flex;gap:9px;font:var(--vd-body-3xs-t);color:var(--vd-ink-62)}
.vd-check__mark{color:var(--vd-ok)}
.vd-check__mark--peach{color:var(--vd-peach-2)}
.vd-check--on-red{margin-bottom:28px}
.vd-check--on-red .vd-check__item{color:var(--vd-on-red-82)}
.vd-tile__num--tight{margin-bottom:18px}
.vd-timeline__item--row{padding:18px 0;border-top:1px solid var(--vd-line-9)}
.vd-course__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--vd-line-10)}
.vd-course__meta{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:16px}
.vd-course__dur{font:var(--vd-mono);color:var(--vd-ink-45);white-space:nowrap;flex:none}
.vd-course__pricebox{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap;flex:none}
.vd-course__price{font:var(--vd-price)}
.vd-course__per{margin-top:5px;font:var(--vd-body-115);color:var(--vd-ink-42)}
.vd-course__btn{padding:13px;text-align:center;border-radius:var(--vd-r-10);white-space:nowrap;font:var(--vd-ui);background:var(--vd-surface-5);color:var(--vd-ink)}
.vd-course--hot .vd-course__btn{background:var(--vd-ink);color:var(--vd-bg-panel)}

/* Étapes d'inscription et modalités — L1240-1262 */
.vd-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:40px}
.vd-flow__step{padding:0 24px 0 0;min-width:0}
.vd-flow__num{font:var(--vd-mono);color:var(--vd-orange-soft);margin-bottom:10px}
.vd-flow__title{margin:0 0 8px;font:var(--vd-h3-s-d)}
.vd-flow__text{margin:0;font:var(--vd-body-3xs-16);color:var(--vd-ink-55)}
.vd-modalities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:36px;border-top:1px solid var(--vd-line-9)}
.vd-modalities__k{font:var(--vd-mono-s);color:var(--vd-ink-40);margin-bottom:9px}
.vd-modalities__v{font:var(--vd-nav-15-15);color:var(--vd-ink-80)}

/* Carte de formateur — L1290-1302 */
.vd-trainer{display:flex;gap:24px;padding:32px;border-radius:var(--vd-r-18);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-trainer__photo{position:relative;width:96px;height:96px;flex:none;border-radius:var(--vd-r-circle);overflow:hidden}
.vd-trainer__photo img,.vd-trainer__photo > .vd-media-empty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vd-trainer__name{margin:0 0 5px;font:var(--vd-h3)}
.vd-trainer__role{font:var(--vd-mono-125);color:var(--vd-orange-soft);margin-bottom:14px}
.vd-trainer__bio{margin:0 0 16px;font:var(--vd-body-xs-loose);color:var(--vd-ink-60)}

/* Fiche formation — L1388-1445 */
.vd-h1-train{font:var(--vd-h1-train);letter-spacing:var(--vd-track-art)}
.vd-pricebox{padding:22px 26px;border-radius:var(--vd-r-14);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-pricebox__k{font:var(--vd-mono-s);color:var(--vd-ink-50);margin-bottom:8px}
.vd-pricebox__v{font:var(--vd-stat-m)}
.vd-program{display:flex;flex-direction:column;gap:12px}
.vd-program__row{display:flex;gap:20px;padding:22px 26px;border-radius:var(--vd-r-14);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-program__day{flex:none;width:90px;font:var(--vd-mono-15);color:var(--vd-orange-soft)}
.vd-program__text{flex:1;min-width:0;font:var(--vd-body-s-loose);color:var(--vd-ink-72)}
.vd-outcome{padding:26px;border-radius:var(--vd-r-16);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-outcome__mark{color:var(--vd-ok);font:var(--vd-body-15-flat);margin-bottom:14px}
.vd-outcome__text{margin:0;font:var(--vd-body-15);color:var(--vd-ink-70)}
.vd-block__title--spaced{margin:48px 0 22px}

/* Corps d'article — VISIODEV.md §6.6 */
.vd-prose{max-width:720px}
.vd-prose h2{font:var(--vd-h3-l);letter-spacing:var(--vd-track-h3);margin:36px 0 14px}
.vd-prose h3{font:var(--vd-h3-s);margin:28px 0 10px}
.vd-prose p{font:var(--vd-body-m-loose);color:var(--vd-ink-62);margin:0 0 18px}
.vd-prose ul{margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.vd-prose li{position:relative;padding-left:20px;font:var(--vd-body-m-17);color:var(--vd-ink-58)}
.vd-prose li::before{content:'';position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:var(--vd-r-circle);background:var(--vd-orange-soft)}
.vd-prose blockquote{margin:26px 0;padding:22px 26px;border-radius:var(--vd-r-14);background:var(--vd-surface-3);border:1px solid var(--vd-line-9);font:var(--vd-h4);color:var(--vd-ink)}
.vd-prose code{font:var(--vd-mono-m);background:var(--vd-surface-5);padding:2px 6px;border-radius:var(--vd-r-6)}
.vd-prose pre{overflow:auto;padding:20px;border-radius:var(--vd-r-14);background:var(--vd-field-bg);border:1px solid var(--vd-line-9)}
.vd-prose img{border-radius:var(--vd-r-14);margin:24px 0}

/* --- Page Expertise --- */

/* Ancres de navigation interne — L807 */
.vd-anchors{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.vd-anchor{
  padding:11px 18px;border-radius:var(--vd-r-pill);white-space:nowrap;
  background:var(--vd-surface-5);border:1px solid var(--vd-line-12);
  color:var(--vd-ink-62);font:var(--vd-nav-s);
  transition:background var(--vd-t-fast),color var(--vd-t-fast);
}
.vd-anchor:hover{background:var(--vd-red-16);border-color:var(--vd-red-40);color:var(--vd-ink)}

/* Domaine d'expertise en split alterné — L816-830 */
.vd-domain{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;
  padding:36px;border-radius:var(--vd-r-20);
  background:var(--vd-surface-28);border:1px solid var(--vd-line-9);
  scroll-margin-top:100px;
}
.vd-domain{transition:border-color var(--vd-t-med)}
.vd-domain:hover{border-color:var(--vd-red-35)}
.vd-domain + .vd-domain{margin-top:18px}
.vd-domain--reverse .vd-domain__media{order:-1}
.vd-domain__media{position:relative;min-width:0;min-height:240px}
.vd-domain__media img,.vd-domain__media > .vd-media-empty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--vd-r-14)}
.vd-domain__title{margin:0 0 14px;font:var(--vd-h3-xl);letter-spacing:var(--vd-track-h3)}
.vd-domain__text{margin:0 0 22px;font:var(--vd-body-s-loose);color:var(--vd-ink-60)}
.vd-domain__tags{display:flex;flex-wrap:wrap;gap:8px}
.vd-domain__tag{padding:7px 12px;border-radius:var(--vd-r-8);background:var(--vd-surface-5);font:var(--vd-mono);color:var(--vd-ink-62)}
.vd-domain__case{
  display:flex;align-items:center;gap:16px;margin-top:26px;padding:16px 20px;
  border-radius:var(--vd-r-12);background:var(--vd-red-09);border:1px solid var(--vd-red-24);
  color:var(--vd-ink);transition:background var(--vd-t-med);
}
.vd-domain__case:hover{background:var(--vd-red-16);color:var(--vd-ink)}
.vd-domain__metric{flex:none;font:var(--vd-stat-20);color:var(--vd-on-red)}
.vd-domain__caselabel{flex:1;min-width:0;font:var(--vd-body-135-145);color:var(--vd-ink-70)}
.vd-domain__more{flex:none;font:var(--vd-nav-xs);color:var(--vd-orange-soft);white-space:nowrap}

/* Phases du déroulé technique — L840-846 */
.vd-phase{padding:24px;border-radius:var(--vd-r-14);background:var(--vd-field-bg);border:1px solid var(--vd-line-7)}
.vd-phase__num{font:var(--vd-mono);color:var(--vd-orange-soft);margin-bottom:14px}
.vd-phase__title{margin:0 0 8px;font:var(--vd-h3-s-d)}
.vd-phase__text{margin:0;font:var(--vd-body-3xs-16);color:var(--vd-ink-55)}

/* Garanties — L857-861 */
.vd-guarantee{padding:28px;border-radius:var(--vd-r-18);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-guarantee__num{font:var(--vd-mono);color:var(--vd-orange-soft);margin-bottom:20px}
.vd-guarantee__title{margin:0 0 10px;font:var(--vd-h3-19)}
.vd-guarantee__text{margin:0;font:var(--vd-body-2xs);color:var(--vd-ink-58)}

/* Formules d'intervention — L873-890. L'offre du milieu est mise en avant
   (décodé L2863-2867 : fond dégradé, bordure rouge, bouton rouge plein). */
.vd-offer{
  display:flex;flex-direction:column;padding:32px;border-radius:var(--vd-r-18);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  transition:transform var(--vd-t-med);
}
.vd-offer:hover{transform:translateY(-4px)}
.vd-offer--hot{background:linear-gradient(165deg,var(--vd-red-deep-24),var(--vd-surface-3));border-color:var(--vd-red-34)}
.vd-offer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.vd-offer__kind{font:var(--vd-mono);color:var(--vd-ink-45)}
.vd-offer__badge{padding:4px 9px;border-radius:var(--vd-r-pill);background:var(--vd-red-18);font:var(--vd-ui-11);color:var(--vd-orange-mid)}
.vd-offer__title{margin:0 0 10px;font:var(--vd-h3-23)}
.vd-offer__text{margin:0 0 22px;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}
.vd-offer__points{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.vd-offer__foot{margin-top:auto;padding-top:22px;border-top:1px solid var(--vd-line-10)}
.vd-offer__btn{
  display:block;padding:13px;text-align:center;border-radius:var(--vd-r-10);white-space:nowrap;
  font:var(--vd-ui);background:var(--vd-line-8);color:var(--vd-ink);
  transition:transform var(--vd-t-fast);
}
.vd-offer__btn:hover{transform:translateY(-2px);color:var(--vd-ink)}
.vd-offer--hot .vd-offer__btn{background:var(--vd-red);color:var(--vd-on-red)}
.vd-offer--hot .vd-offer__btn:hover{color:var(--vd-on-red)}

/* Stack — L899-908 */
.vd-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.vd-stack__title{font:var(--vd-ui);color:var(--vd-ink);padding-bottom:14px;border-bottom:1px solid var(--vd-line-12);margin-bottom:16px}
.vd-stack__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.vd-stack__item{
  display:flex;align-items:center;justify-content:center;min-width:0;
  padding:10px 6px;border-radius:var(--vd-r-8);background:var(--vd-surface-5);
  text-align:center;font:var(--vd-mono-125b);color:var(--vd-ink-62);
}

/* --- Page Contact --- */

/* Badges de réassurance — L1879 */
.vd-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.vd-badge{padding:8px 14px;border-radius:var(--vd-r-pill);background:var(--vd-surface-5);border:1px solid var(--vd-line-11);font:var(--vd-nav-s);color:var(--vd-ink-62)}

/* Formulaire de contact — L1916-1969.
   Les trois blocs sont numérotés 01/02/03 : une colonne de numéro fixe en
   mono orange, puis les champs. Le message d'erreur et la barre de bouton
   sont alignés sur les champs, pas sur le numéro (margin-left:32px). */
.vd-label{display:block;font:var(--vd-ui-xs);color:var(--vd-ink-60);margin-bottom:10px}
.vd-formstep{display:flex;gap:18px}
.vd-formstep__n{flex:none;padding-top:3px;font:var(--vd-mono-lh);color:var(--vd-orange-soft)}
.vd-formstep__body{flex:1;min-width:0}
.vd-formstep__body--stack{display:flex;flex-direction:column;gap:22px}
.vd-formstep__title{font:var(--vd-h4-s);margin-bottom:14px}
.vd-formstep__body--stack .vd-formstep__title{margin-bottom:0}
.vd-form__indent{margin-left:32px}

/* Colonne de droite : encart « En direct » puis encart international — L1974 */
.vd-contact-aside{display:flex;flex-direction:column;gap:18px;position:sticky;top:120px}

/* Encart de contact direct — L1975-1995.
   Les lignes sont des blocs incrustés (margin négative + padding) avec fond au
   survol, et non des lignes séparées par des filets. */
.vd-direct{padding:30px;border-radius:var(--vd-r-18);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-direct__title{margin:0 0 20px;font:var(--vd-h3-19)}
.vd-direct__list{display:flex;flex-direction:column;gap:6px;font:var(--vd-body-xs-15);color:var(--vd-ink-65)}
.vd-direct__row{
  display:flex;gap:14px;align-items:flex-start;
  margin:0 -12px;padding:12px;border-radius:var(--vd-r-12);color:inherit;
  transition:background var(--vd-t-fast);
}
.vd-direct__row:hover{background:var(--vd-surface-5);color:inherit}
.vd-direct__row--plain{margin:0;padding:12px 0}
.vd-direct__icon{flex:none;margin-top:2px;stroke:var(--vd-orange-soft)}
.vd-direct__k{display:block;font:var(--vd-mono-s);color:var(--vd-ink-40);margin-bottom:6px}
/* La pastille d'ouverture vit DANS la ligne « horaires », sous le libellé
   (décodé L1992) — ce n'est pas un bloc autonome sous la liste. */
.vd-direct__open{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:5px 11px;border-radius:var(--vd-r-pill);font:var(--vd-ui-12)}
.vd-direct__open--on{background:var(--vd-ok-bg-14);color:var(--vd-ok)}
.vd-direct__open--off{background:var(--vd-line-6);color:var(--vd-ink-55)}

/* Encart « clients internationaux » — L1996-1999 */
.vd-intl{padding:26px;border-radius:var(--vd-r-18);background:linear-gradient(140deg,var(--vd-red-deep-30),var(--vd-surface-3));border:1px solid var(--vd-red-28)}
.vd-intl__k{font:var(--vd-mono-s);color:var(--vd-orange-mid);margin-bottom:12px}
.vd-intl__text{margin:0;font:var(--vd-body-xs-loose);color:var(--vd-ink-70)}

/* Ce qui se passe ensuite — L2004-2022.
   Les trois étapes forment une grille à filets d'un pixel, elle-même posée
   dans un panneau : ce ne sont pas trois cartes détachées. */
.vd-nextgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--vd-line-9);border:1px solid var(--vd-line-9);
  border-radius:var(--vd-r-16);overflow:hidden;
}
.vd-next{padding:32px;background:var(--vd-bg);min-width:0}
.vd-next__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.vd-next__n{font:var(--vd-mono);color:var(--vd-orange-soft)}
.vd-next__when{padding:5px 11px;border-radius:var(--vd-r-pill);background:var(--vd-line-6);font:var(--vd-mono-s);color:var(--vd-ink-60);white-space:nowrap}
.vd-next__title{margin:0 0 10px;font:var(--vd-h3)}
.vd-next__text{margin:0;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}

/* Canaux directs et accordéon encadré — L2026-2055 */
.vd-channels__lede{margin:0 0 28px;font:var(--vd-body-s-loose);color:var(--vd-ink-58)}
.vd-channels{display:flex;flex-direction:column;gap:11px}
.vd-channel{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:18px 22px;border-radius:var(--vd-r-14);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);
  color:var(--vd-ink);transition:border-color var(--vd-t-med);
}
.vd-channel:hover{border-color:var(--vd-line-22);color:var(--vd-ink)}
.vd-channel__k{font:var(--vd-mono-s);color:var(--vd-ink-45);margin-bottom:7px}
.vd-channel__v{font:var(--vd-h4-16-13)}
.vd-channel__arrow{flex:none;font:var(--vd-nav-s);color:var(--vd-orange-soft)}

.vd-faq--boxed{
  display:flex;flex-direction:column;gap:1px;border-top:0;
  background:var(--vd-line-9);border:1px solid var(--vd-line-9);
  border-radius:var(--vd-r-16);overflow:hidden;
}
.vd-faq--boxed .vd-faq__item{padding:0;border-bottom:0;background:var(--vd-bg)}
.vd-faq--boxed .vd-faq__q{padding:24px 28px;font:var(--vd-faq-q-l);transition:background var(--vd-t-fast)}
.vd-faq--boxed .vd-faq__q:hover{background:var(--vd-surface-3)}   /* [relevé] L2047 */
.vd-faq--boxed .vd-faq__sign{font:var(--vd-sign-l)}
.vd-faq--boxed .vd-faq__a p{margin:0;padding:0 28px 24px;max-width:none}

/* --- Page À propos --- */

/* Frise « Notre histoire » — L1746-1756 */
.vd-story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.vd-story__step{padding:0 28px 0 0;min-width:0}
.vd-story__year{font:var(--vd-stat-xs);color:var(--vd-orange-soft);margin-bottom:12px}
.vd-story__title{margin:0 0 10px;font:var(--vd-h3-s-d)}
.vd-story__text{margin:0;font:var(--vd-body-3xs-16);color:var(--vd-ink-55)}

/* Cartes d'équipe — L1763-1771 */
.vd-member{padding:26px;border-radius:var(--vd-r-16);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-member__photo{width:76px;height:76px;border-radius:var(--vd-r-circle);object-fit:cover}
.vd-member__name{margin:18px 0 5px;font:var(--vd-h3-s-d)}
.vd-member__role{font:var(--vd-mono-m);color:var(--vd-orange-soft)}
.vd-member__bio{margin:14px 0 0;font:var(--vd-body-3xs-16);color:var(--vd-ink-55)}

/* Engagements — L1796-1801 */
.vd-value{padding:30px;border-radius:var(--vd-r-16);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-value__mark{width:34px;height:34px;border-radius:var(--vd-r-10);background:linear-gradient(140deg,var(--vd-orange),var(--vd-red-deep));margin-bottom:20px}
.vd-value__title{margin:0 0 10px;font:var(--vd-h3)}
.vd-value__text{margin:0;font:var(--vd-body-xs-loose);color:var(--vd-ink-58)}

/* Recrutement — L1807-1830 */
.vd-hiring{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;border-radius:var(--vd-r-22);overflow:hidden;border:1px solid var(--vd-red-28)}
.vd-hiring__perks{display:flex;flex-direction:column;gap:11px;margin-bottom:32px}
.vd-hiring__perk{display:flex;gap:11px;font:var(--vd-body-xs-155);color:var(--vd-on-red-86)}
.vd-hiring__jobs{min-width:0;padding:44px;background:var(--vd-surface-28)}
.vd-hiring__k{font:var(--vd-mono-s);color:var(--vd-ink-45);margin-bottom:24px}
.vd-job{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--vd-line-9);color:var(--vd-ink);
  transition:opacity var(--vd-t-fast);
}
.vd-job:hover{opacity:.72;color:var(--vd-ink)}
.vd-job__title{font:var(--vd-h4-job)}
.vd-job__meta{margin-top:5px;font:var(--vd-body-13-14);color:var(--vd-ink-50)}
.vd-job__more{flex:none;font:var(--vd-nav-s);color:var(--vd-orange-soft);white-space:nowrap}

/* Identité de l'entreprise — L1838-1852 */
.vd-identity{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--vd-line-9);border:1px solid var(--vd-line-9);
  border-radius:var(--vd-r-16);overflow:hidden;
}
.vd-identity__cell{padding:26px 28px;background:var(--vd-bg);min-width:0}
.vd-identity__k{font:var(--vd-mono-s);color:var(--vd-ink-42);margin-bottom:10px}
.vd-identity__v{font:var(--vd-body-15-15);color:var(--vd-ink-82)}
.vd-identity__note{margin:26px 0 0;font:var(--vd-body-2xs-17);color:var(--vd-ink-45)}

/* --- Page Articles --- */

/* Article à la une — L1475-1486 */
.vd-feat-art{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;
  padding:32px;border-radius:var(--vd-r-20);
  background:var(--vd-surface-3);border:1px solid var(--vd-line-9);color:var(--vd-ink);
  transition:border-color var(--vd-t-med);
}
.vd-feat-art:hover{border-color:var(--vd-red-40);color:var(--vd-ink)}
.vd-feat-art__media{position:relative;min-width:0;min-height:300px}
.vd-feat-art__media img,.vd-feat-art__media > .vd-media-empty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--vd-r-14)}
.vd-feat-art__meta{font:var(--vd-mono);color:var(--vd-orange-soft);margin-bottom:16px}
.vd-feat-art__title{margin:0 0 14px;font:var(--vd-h2-art);letter-spacing:var(--vd-track-h2s)}
.vd-feat-art__lede{margin:0 0 22px;font:var(--vd-body-m-17);color:var(--vd-ink-60)}
.vd-feat-art__more{font:var(--vd-ui);color:var(--vd-orange-soft)}

/* Barre de comptage et filtres thématiques — L1493-1512 */
.vd-countbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.vd-countbar__label{font:var(--vd-body-3xs-t);color:var(--vd-ink-40)}

/* Carte article — L1517-1529 */
.vd-card__meta{font:var(--vd-mono-s);color:var(--vd-ink-45);margin-bottom:10px}
.vd-card__title--art{margin:0 0 8px;font:var(--vd-h3-18-13)}
.vd-card__byline{
  display:flex;justify-content:space-between;gap:10px;padding-top:14px;
  border-top:1px solid var(--vd-line-7);
  font:var(--vd-body-12-flat4);color:var(--vd-ink-42);
}

/* Frise chronologique — L1040-1052 */
.vd-timeline{display:flex;flex-direction:column}
.vd-timeline__row{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:26px 0;border-top:1px solid var(--vd-line-9)}
.vd-timeline__year{font:var(--vd-stat-s);color:var(--vd-orange-soft)}
.vd-timeline__items{min-width:0;display:flex;flex-direction:column;gap:14px}
.vd-timeline__item{display:flex;align-items:baseline;gap:16px;color:var(--vd-ink);transition:opacity var(--vd-t-fast)}
.vd-timeline__item:hover{opacity:.75;color:var(--vd-ink)}
.vd-timeline__sector{flex:none;width:110px;font:var(--vd-mono);color:var(--vd-ink-42)}
.vd-timeline__title{flex:1;min-width:0;font:var(--vd-item-title);color:var(--vd-ink-85)}
.vd-timeline__dur{flex:none;font:var(--vd-mono-m);color:var(--vd-ink-62);white-space:nowrap}

/* Citation client cliquable — L1060-1073 */
.vd-quote--link{color:var(--vd-ink);transition:border-color var(--vd-t-med),transform var(--vd-t-med)}
.vd-quote--link:hover{border-color:var(--vd-red-35);transform:translateY(-3px);color:var(--vd-ink)}
.vd-quote__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.vd-quote__sector{font:var(--vd-mono-s);color:var(--vd-orange-soft)}
.vd-quote__project{margin-top:auto;font:var(--vd-nav-13-14);color:var(--vd-ink-50)}
.vd-quote__who--spaced{margin-top:16px}
.vd-note{margin:28px 0 0;max-width:660px;font:var(--vd-body-xs-17);color:var(--vd-ink-50)}

/* Bandeau de logos technologiques — L538 */
.vd-logos{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--vd-max-logos);margin:0 auto;
  font:var(--vd-logo);color:var(--vd-ink-42);
}

/* ------------------------------------------------------------
   10. PUCES, FILTRES, CHIPS
   ------------------------------------------------------------ */
.vd-chip{
  padding:11px 18px;border-radius:var(--vd-r-pill);
  background:var(--vd-surface-5);border:1px solid var(--vd-line-11);
  font:var(--vd-nav-s);color:var(--vd-ink-75);
  white-space:nowrap;
}
.vd-chip-row{display:flex;gap:10px;flex-wrap:wrap}

/* Filtres cliquables (page Réalisations) */
.vd-filter{
  padding:10px 18px;border-radius:var(--vd-r-pill);cursor:pointer;
  font:var(--vd-nav-s);
  background:var(--vd-surface-4);color:var(--vd-ink-62);border:1px solid var(--vd-line-13);
  transition:background var(--vd-t-fast),color var(--vd-t-fast),border-color var(--vd-t-fast);
}
.vd-filter[aria-pressed="true"]{background:var(--vd-red);color:var(--vd-on-red);border-color:var(--vd-red)}

/* Sélecteur compact de besoin (formulaire rapide) — L752 */
/* Puces de besoin — CHIP_OFF / CHIP_ON de la maquette (décodé L2125-2126).
   L'état actif est un rouge plein, pas une teinte translucide. */
.vd-pick{
  padding:9px 10px;border-radius:var(--vd-r-9);cursor:pointer;
  white-space:nowrap;flex:none;font:var(--vd-body-12-flat);
  background:var(--vd-surface-4);color:var(--vd-ink-62);border:1px solid var(--vd-line-13);
  transition:background var(--vd-t-fast),color var(--vd-t-fast),border-color var(--vd-t-fast);
}
.vd-pick:has(input:checked),
.vd-pick[aria-pressed="true"]{background:var(--vd-red);color:var(--vd-on-red);border-color:var(--vd-red)}
.vd-pick-row{display:flex;gap:6px;flex-wrap:wrap;min-width:0;margin-bottom:4px}

/* ------------------------------------------------------------
   11. FORMULAIRES — L756-771
   ------------------------------------------------------------ */
.vd-field{
  width:100%;padding:15px 16px;border-radius:var(--vd-r-10);
  background:var(--vd-field-bg);border:1px solid var(--vd-line-14);
  color:var(--vd-ink);font:var(--vd-body-15-flat);
  transition:border-color var(--vd-t-fast);
}
.vd-field--area{height:96px;resize:vertical;font:var(--vd-body-15)}
.vd-field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
/* Le formulaire de contact emploie un champ plus clair, moins haut et plus
   espacé que le devis rapide de l'accueil (décodé L1945 contre L756). */
.vd-field--light{padding:14px 16px;background:var(--vd-surface-4);border-color:var(--vd-line-13)}
.vd-field--area-l{height:130px}
.vd-field-pair--16{gap:16px}
.vd-form{display:flex;flex-direction:column;gap:14px}
.vd-form--steps{gap:34px}
.vd-form__error{
  padding:13px 16px;border-radius:var(--vd-r-10);
  background:var(--vd-red-12);border:1px solid var(--vd-red-35);
  font:var(--vd-err-msg);color:var(--vd-orange-mid);
}
/* Pot de miel anti-spam — [spec] §6.9 */
.vd-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Écran de confirmation d'envoi — L1898-1911 */
.vd-sent{padding:44px;border-radius:var(--vd-r-18);background:var(--vd-ok-bg);border:1px solid var(--vd-ok-line)}
.vd-sent__badge{font:var(--vd-mono-ui);color:var(--vd-ok);margin-bottom:14px}
.vd-sent__title{margin:0 0 12px;font:var(--vd-h3-26)}
.vd-sent__text{margin:0 0 22px;font:var(--vd-body-s-loose);color:var(--vd-ink-65)}

.vd-recap{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;padding:20px 24px;border-radius:var(--vd-r-14);background:var(--vd-surface-3);border:1px solid var(--vd-line-9)}
.vd-recap__row{display:flex;gap:16px;align-items:baseline}
.vd-recap__k{flex:none;width:96px;font:var(--vd-mono-s);color:var(--vd-ink-42)}
.vd-recap__v{flex:1;min-width:0;font:var(--vd-body-xs-tight);color:var(--vd-ink-78)}

/* ------------------------------------------------------------
   12. FAQ (accordéon) — L710-723
   La maquette anime grid-template-rows (0fr → 1fr), pas height :
   pas de mesure JS, pas de saut. VISIODEV.md §2.12 décrit l'autre
   technique — c'est la maquette qui fait foi.
   ------------------------------------------------------------ */
.vd-faq{display:flex;flex-direction:column;border-top:1px solid var(--vd-line-9)}
.vd-faq__item{padding:22px 0;border-bottom:1px solid var(--vd-line-9)}
.vd-faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:0;background:none;border:0;cursor:pointer;text-align:left;
  font:var(--vd-faq-q);color:var(--vd-ink-82);
}
.vd-faq__q[aria-expanded="true"]{color:var(--vd-ink)}
.vd-faq__sign{flex:none;font:var(--vd-sign);color:var(--vd-orange-soft);transition:transform var(--vd-t-acc)}
.vd-faq__q[aria-expanded="true"] .vd-faq__sign{transform:rotate(45deg)}
.vd-faq__a{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--vd-t-panel),opacity var(--vd-t-fade);
}
.vd-faq__q[aria-expanded="true"] + .vd-faq__a{grid-template-rows:1fr;opacity:1}
.vd-faq__a-inner{overflow:hidden;min-height:0}
.vd-faq__a p{margin:14px 0 0;max-width:620px;font:var(--vd-body-15-17);color:var(--vd-ink-60)}
.vd-faq__heading{margin:0 0 16px}                                                                         /* L705 */
.vd-faq__intro{margin:0 0 22px;font:var(--vd-body-m-165);color:var(--vd-ink-60)}                          /* L706 */

/* ------------------------------------------------------------
   13. HERO, HALOS, EN-TÊTES DE PAGE, CTA
   ------------------------------------------------------------ */
.vd-hero{position:relative;overflow:hidden;padding:0 0 60px}                       /* L520 */
.vd-hero__halo{
  position:absolute;top:-700px;left:50%;width:1560px;height:1560px;transform:translateX(-50%);
  border-radius:var(--vd-r-circle);
  background:radial-gradient(circle at 50% 44%,var(--vd-halo-0) 0%,var(--vd-halo-1) 28%,var(--vd-halo-2) 44%,var(--vd-halo-3) 60%,var(--vd-orange-halo) 76%,var(--vd-orange) 90%,var(--vd-orange-pale) 100%);
  box-shadow:var(--vd-shadow-halo);
  animation:vdHaloPulse 11s ease-in-out infinite;   /* décodé L2773 — la spec §2.13 dit 7s, la maquette dit 11s */
}
.vd-hero__scrim{position:absolute;inset:0;background:radial-gradient(ellipse 900px 420px at 50% 90%,var(--vd-bg-94) 0%,transparent 100%)}
.vd-hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;padding:124px 24px 148px;text-align:center}
.vd-hero__kicker{font:var(--vd-nav-l);color:var(--vd-ink-80);margin-bottom:24px}   /* L525 */
.vd-hero__title{max-width:940px}
.vd-hero__lede{margin:24px 0 0;max-width:620px}
.vd-hero__accent{color:var(--vd-peach)}                                                                   /* L527 */
.vd-hero__actions{margin-top:44px}                                                                        /* L529 */

/* En-tête de page intérieure */
.vd-pagehead{position:relative;overflow:hidden;padding:92px var(--vd-gutter) 64px;border-bottom:1px solid var(--vd-line-7)}
.vd-pagehead--short{padding-bottom:56px}   /* L1465 — en-tête de la page Articles */
.vd-pagehead--tall{padding:96px var(--vd-gutter) 72px}   /* L799 — en-tête de la page Expertise */
.vd-pagehead__title--l{max-width:900px}                  /* L803 */
.vd-pagehead__title--m{max-width:880px}                  /* L1726 */
.vd-pagehead__halo{
  position:absolute;left:-200px;top:-280px;width:900px;height:900px;border-radius:var(--vd-r-circle);
  background:radial-gradient(circle,var(--vd-halo-red-30),var(--vd-halo-orange-09) 46%,transparent 70%);
  filter:blur(40px);
}

/* Section CTA finale, fond rouge — 4 géométries relevées.
   Accueil L777 : 104/108, h2 60px, conteneur 1000px, halo .34
   Pages       L938,1149,1611,1855,2063 : 96/100, h2 52px, 900px, halo .32
   Fiche form. L1446 : 88/96, h2 46px, 900px                                    */
.vd-cta{
  position:relative;overflow:hidden;
  padding:96px var(--vd-gutter) 100px;
  background:linear-gradient(150deg,var(--vd-red-deep) 0%,var(--vd-red-mid) 48%,var(--vd-red-darkest) 100%);
  border-top:1px solid var(--vd-line-12);
}
.vd-cta--home{padding:104px var(--vd-gutter) 108px}
.vd-cta--compact{padding:88px var(--vd-gutter) 96px}
.vd-cta__halo{
  position:absolute;left:50%;top:-320px;width:1100px;height:1100px;transform:translateX(-50%);
  border-radius:var(--vd-r-circle);
  background:radial-gradient(circle,var(--vd-halo-peach-32),var(--vd-halo-orange-10) 46%,transparent 70%);
}
.vd-cta--home .vd-cta__halo{background:radial-gradient(circle,var(--vd-halo-peach-34),var(--vd-halo-orange-10) 46%,transparent 70%)}
.vd-cta__inner{position:relative;max-width:var(--vd-max-cta);margin:0 auto;text-align:center}
.vd-cta--home .vd-cta__inner{max-width:var(--vd-max-cta-l)}
.vd-cta__eyebrow{font:var(--vd-mono);letter-spacing:var(--vd-track-caps);color:var(--vd-on-red-70);margin-bottom:26px}
.vd-cta__title{margin:0;font:var(--vd-cta-h2);letter-spacing:var(--vd-track-hero);color:var(--vd-on-red)}
.vd-cta:not(.vd-cta--home) .vd-cta__title{font:var(--vd-h2-xl);letter-spacing:var(--vd-track-hero)}
.vd-cta.vd-cta--compact .vd-cta__title{font:var(--vd-cta-h2-s)}
.vd-cta__lede{margin:24px auto 0;max-width:620px;font:var(--vd-lede-cta);color:var(--vd-on-red-78)}
.vd-cta:not(.vd-cta--home) .vd-cta__lede{max-width:580px;font:var(--vd-body-xl-s)}
.vd-cta__actions{margin-top:42px}
.vd-cta__strip{
  display:flex;gap:36px;justify-content:center;flex-wrap:wrap;
  margin-top:52px;padding-top:32px;border-top:1px solid var(--vd-line-22);
  font:var(--vd-nav-m);color:var(--vd-on-red-82);
}

/* ------------------------------------------------------------
   14. PIED DE PAGE ET BOUTON « HAUT DE PAGE » — L2078, L2122
   ------------------------------------------------------------ */
.vd-footer{border-top:1px solid var(--vd-line-8);padding:56px var(--vd-gutter) 32px}
.vd-footer__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 1fr 1fr;gap:40px}
.vd-footer__logo{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.vd-footer__logo img{height:28px;width:auto}
.vd-footer__blurb{margin:0;max-width:280px;font:var(--vd-body-2xs-165);color:var(--vd-ink-50)}
.vd-footer__title{font:var(--vd-mono-s);color:var(--vd-ink-35);margin-bottom:16px}
.vd-footer__list{display:flex;flex-direction:column;gap:11px;font:var(--vd-body-2xs-flat);color:var(--vd-ink-60)}
.vd-footer__list--contact{font:var(--vd-body-2xs-15)}
.vd-footer__link{color:inherit;cursor:pointer;transition:color var(--vd-t-fast)}
.vd-footer__link:hover{color:var(--vd-ink)}
.vd-footer__legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--vd-line-7);
  font:var(--vd-body-13-flat);color:var(--vd-ink-35);
}

.vd-totop{
  position:fixed;right:28px;bottom:28px;z-index:60;
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:var(--vd-r-circle);border:0;
  background:var(--vd-red-92);color:var(--vd-on-red);font:var(--vd-ui-17);
  cursor:pointer;box-shadow:var(--vd-shadow-float);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--vd-t-slow),transform var(--vd-t-slow),background var(--vd-t-fast);
}
.vd-totop[data-visible]{opacity:1;transform:translateY(0);pointer-events:auto}
.vd-totop:hover{background:var(--vd-orange)}   /* [relevé] L2122 */

/* ------------------------------------------------------------
   15. RESPONSIVE
   ATTENTION : aucune media query n'existe dans la maquette (une
   seule, prefers-reduced-motion). Tout ce bloc vient de
   VISIODEV.md §2.16 : c'est de la conception, pas du portage.
   ------------------------------------------------------------ */

/* ≤1180px — grilles très denses */
@media (max-width:1180px){
  .vd-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vd-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ≤1024px — tablette paysage */
@media (max-width:1024px){
  .vd-grid--6,
  .vd-grid--5,
  .vd-grid--4,
  .vd-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-split{grid-template-columns:minmax(0,1fr)}
  .vd-split--1-15,
  .vd-split--17-1{gap:36px}
  .vd-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-media-frame{min-height:320px}

  /* [complément] blocs à colonnes fixes non couverts par §2.16 */
  .vd-method__grid,
  .vd-flow,
  .vd-modalities{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .vd-method__step,
  .vd-flow__step{padding-right:0}
  .vd-case,
  .vd-feature,
  .vd-feat-art,
  .vd-domain,
  .vd-hiring,
  .vd-quick__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .vd-story{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .vd-story__step{padding-right:0}
  .vd-identity{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-nextgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* la colonne « en direct » passe sous le formulaire : plus rien à coller */
  .vd-contact-aside{position:static}
  .vd-domain--reverse .vd-domain__media{order:0}
  .vd-stack{grid-template-columns:minmax(0,1fr)}
  .vd-case__media,
  .vd-feature__media{min-height:280px}
  .vd-feat-art__media{min-height:220px}
  .vd-cta__title,
  .vd-cta--compact .vd-cta__title,
  .vd-cta:not(.vd-cta--home) .vd-cta__title{font-size:44px;line-height:1.08}
}

/* ≤900px — bascule mobile : menu, gouttières, titres */
@media (max-width:900px){
  .vd-header{padding-left:20px;padding-right:20px}
  .vd-header[data-scrolled]{padding-left:20px;padding-right:20px}
  .vd-nav,
  .vd-header .vd-btn--header{display:none}
  .vd-burger{display:flex}

  .vd-section,
  .vd-filters-wrap,
  .vd-section--band,
  .vd-pagehead,
  .vd-cta,
  .vd-footer{padding-left:var(--vd-gutter-md);padding-right:var(--vd-gutter-md)}

  .vd-h1-hero{font-size:44px;line-height:1.06}
  .vd-h1,.vd-h1-art{font-size:44px;line-height:1.06}
  .vd-h2-xl,.vd-h2-l,.vd-h2-m,.vd-h2,.vd-h2-card,.vd-h2-s{font-size:30px;line-height:1.14}
  .vd-h3-xl{font-size:24px}
  .vd-cta__title,
  .vd-cta--compact .vd-cta__title,
  .vd-cta:not(.vd-cta--home) .vd-cta__title{font-size:34px;line-height:1.12}

  .vd-sechead{flex-wrap:wrap;align-items:flex-start;gap:18px}
  .vd-sechead__note{max-width:none}

  .vd-topbar{flex-wrap:wrap;justify-content:center;gap:2px 14px;text-align:center;font-size:11px;padding-left:20px;padding-right:20px}

  /* [complément] la barre de filtres des articles ne se replie pas dans la
     maquette (nowrap) : sans design mobile de référence, on l'autorise à
     passer à la ligne plutôt que de forcer un défilement horizontal. */
  .vd-artbar{position:static;padding-left:var(--vd-gutter-md);padding-right:var(--vd-gutter-md)}
  .vd-artbar__inner{flex-wrap:wrap;gap:12px}
  .vd-artbar__search{width:100%}
  .vd-artbar__themes{flex:1 1 100%;mask-image:none;-webkit-mask-image:none;flex-wrap:wrap}
  .vd-artbar__sort{flex-wrap:wrap}

  /* [complément] frise : la colonne d'année fixe devient une ligne */
  .vd-timeline__row{grid-template-columns:minmax(0,1fr);gap:14px}
  .vd-timeline__item{flex-wrap:wrap;gap:4px 12px}
  .vd-timeline__sector{width:auto}
  .vd-timeline__title{flex:1 1 100%}

  .vd-quick{padding:32px 24px}
  .vd-method{padding:32px 24px}
  .vd-trainer{flex-direction:column;gap:18px}
  .vd-news{gap:16px}
  .vd-news__field{width:100%}
  .vd-logos{flex-wrap:wrap;justify-content:center;gap:14px 26px;font-size:17px}
  .vd-hero__inner{padding-left:20px;padding-right:20px}
}

/* ≥901px — le tiroir mobile n'existe jamais en desktop */
@media (min-width:901px){
  .vd-burger,.vd-drawer{display:none!important}
}

/* ≤760px — une seule colonne */
@media (max-width:760px){
  .vd-grid--2,.vd-grid--3,.vd-grid--4,.vd-grid--5,.vd-grid--6,
  .vd-field-pair,
  .vd-footer__grid{grid-template-columns:minmax(0,1fr)}

  /* exception : les bandeaux de stats restent sur 2 colonnes */
  .vd-stats,.vd-stats--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-results{grid-template-columns:minmax(0,1fr);gap:18px}
  .vd-results__cell + .vd-results__cell{border-left:0;border-top:1px solid var(--vd-line-22);padding-top:18px}

  .vd-panel,.vd-panel--soft,.vd-redblock,.vd-sent{padding:24px}

  /* [complément] */
  .vd-method__grid,
  .vd-flow,
  .vd-modalities{grid-template-columns:minmax(0,1fr)}
  .vd-domain{padding:24px}
  .vd-story{grid-template-columns:minmax(0,1fr)}
  .vd-identity{grid-template-columns:minmax(0,1fr)}
  .vd-nextgrid{grid-template-columns:minmax(0,1fr)}
  /* [complément] le numéro d'étape passe au-dessus du bloc de champs */
  .vd-formstep{flex-direction:column;gap:10px}
  .vd-form__indent{margin-left:0}
  .vd-hiring__jobs{padding:24px}
  .vd-job{flex-wrap:wrap;gap:8px 16px}
  .vd-domain__case{flex-wrap:wrap;gap:8px 14px}
  .vd-stack__items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vd-method__text{max-width:none}
  .vd-course__body{padding:22px 22px 26px}
  .vd-program__row{flex-direction:column;gap:8px}
  .vd-program__day{width:auto}
  .vd-steps__item,.vd-recap__row{flex-wrap:wrap;gap:6px 12px}
  .vd-clientquote{padding:24px}
  .vd-segmented__item--l{padding:13px 22px}
  .vd-filterbar{gap:14px}
  .vd-media-frame,.vd-media-frame--s,.vd-media-frame--xs{min-height:230px}
  .vd-hero__inner{padding:88px 20px 96px}
  .vd-cta,.vd-cta--home,.vd-cta--compact{padding-top:64px;padding-bottom:68px}
  .vd-cta__strip{gap:14px 24px}
  .vd-btn-row{flex-wrap:wrap}
  .vd-btn-row .vd-btn{flex:1 1 auto}
  .vd-footer__legal{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ≤560px — téléphone */
@media (max-width:560px){
  .vd-section,.vd-filters-wrap,.vd-section--band,.vd-pagehead,.vd-cta,.vd-footer{padding-left:var(--vd-gutter-sm);padding-right:var(--vd-gutter-sm)}
  .vd-h1-hero,.vd-h1,.vd-h1-art{font-size:33px}
  .vd-h2-xl,.vd-h2-l,.vd-h2-m,.vd-h2,.vd-h2-card,.vd-h2-s{font-size:25px}
  .vd-h3-xl,.vd-h3-l{font-size:20px}
  .vd-h3-m,.vd-h3,.vd-h3-s{font-size:18px}
  .vd-cta__title,
  .vd-cta--compact .vd-cta__title,
  .vd-cta:not(.vd-cta--home) .vd-cta__title{font-size:28px}
  .vd-stats__value{font-size:30px}
  .vd-stats__cell{padding:22px 14px}
  .vd-totop{right:16px;bottom:16px}
}

/* ------------------------------------------------------------
   15b. VÉRIFICATION PUBLIQUE D'UN DOCUMENT — §8 des spécifications
   Aucune maquette : la page réutilise les primitives des Mentions
   légales et n'ajoute qu'une pastille d'état et une note.
   ------------------------------------------------------------ */
.vd-verif__badge{
  display:inline-block;margin:0 0 28px;padding:10px 20px;
  border-radius:var(--vd-r-pill);border:1px solid transparent;
  font:var(--vd-h3-26);letter-spacing:-.01em;
}
.vd-verif__badge--ok{
  background:var(--vd-ok-bg-14);border-color:var(--vd-ok-line-45);color:var(--vd-ok);
}
.vd-verif__badge--ko{
  background:var(--vd-red-bg-10);border-color:var(--vd-red-line-40);color:var(--vd-red);
}
.vd-verif__badge--unknown{
  background:var(--vd-surface-4);border-color:var(--vd-line-12);color:var(--vd-ink-65);
}
.vd-verif__note{
  margin:28px 0 0;max-width:62ch;font:var(--vd-body-m);color:var(--vd-ink-65);text-wrap:pretty;
}

/* ------------------------------------------------------------
   15c. APERÇU DE RELECTURE — aucune maquette.
   Bandeau rendu sur une fiche NON publiée, visible seulement de qui
   peut approuver (voir Controller::previewing()). Il doit se distinguer
   de la page qu'il coiffe sans la déguiser : la relectrice juge ce que
   verra le public, pas un habillage de plus.
   ------------------------------------------------------------ */
.vd-preview{
  border-bottom:1px solid var(--vd-line-12);background:var(--vd-surface-5);
}
.vd-preview__inner{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  max-width:var(--vd-max);margin:0 auto;padding:14px var(--vd-gutter);
}
.vd-preview__text{margin:0;font:var(--vd-body-s);color:var(--vd-ink-70);text-wrap:pretty}
.vd-preview__flag{
  display:inline-block;margin-right:10px;font:var(--vd-mono-s);letter-spacing:.08em;
  text-transform:uppercase;color:var(--vd-orange-mid);
}
.vd-preview__link{font:var(--vd-body-s);color:var(--vd-orange-soft);white-space:nowrap}

/* ------------------------------------------------------------
   16. MOUVEMENT RÉDUIT — verbatim de la maquette (L494),
   complété pour le halo et l'animation de page.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  [data-zoom] img{transition:none}
  .vd-hero__halo{animation:none}
  .vd-page-in{animation:none}
  .vd-drawer{animation:none}
  html{scroll-behavior:auto}
}