/*!/wp-content/plugins/vhu-assistant/assets/dist/vhd/skin-a.css*//*
 * VHU Assistant — Skin A (vhd-) CSS
 * Préfixe FO : vhd- (runtime via window.VHU_DATA.prefix)
 * Porté depuis sim.css tokens FO — plugin seulement (pas le BO simulateur)
 * 0 ressource tierce · AA WCAG 7:1+ · 2026-06-12
 */

/* ── Reset minimal ─────────────────────────────────────────────────── */
/* Plafond 1440 px (client 2026-06-22) : #vhu-root est borné à 1440 px par le
   bloc injecté (DesignTokensRepository::toCssVars). Il DOIT être lui-même en
   border-box, sinon son padding (var(--vhd-space-4) l.54) s'ajoute au max-width
   et le module rendu dépasse 1440 px (1440 + 2rem). On inclut #vhu-root dans le
   reset + on garantit width:100% sous le cap pour absorber le padding et bloquer
   tout scroll horizontal. */
#vhu-root, #vhu-root *, #vhu-root *::before, #vhu-root *::after { box-sizing: border-box; }
#vhu-root { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; overflow-x: clip; }
#vhu-root button { font-family: inherit; cursor: pointer; }
#vhu-root input, #vhu-root select { font-family: inherit; }
#vhu-root :focus-visible { outline: 2px solid #5B9FDB; outline-offset: 2px; }

/* ── Tokens (valeurs par défaut skin A = vhd bleu administratif) ──── */
#vhu-root {
  --vhd-color-primary:        #1A5A8C;
  --vhd-color-primary-dark:   #134A73;
  --vhd-color-primary-light:  #EAF1F8;
  --vhd-color-surface:        #FFFFFF;
  --vhd-color-surface-alt:    #F6F8FB;
  --vhd-color-border:         #D5DEE9;
  --vhd-color-text-headline:  #0E1B2E;
  --vhd-color-text-body:      #324155;
  --vhd-color-text-muted:     #5A6B82;
  --vhd-color-error:          #B42318;
  --vhd-color-error-bg:       #FEF1F0;
  --vhd-color-success:        #15803D;
  --vhd-color-success-bg:     #ECFBF1;
  --vhd-color-warning-bg:     #FFF7E6;
  --vhd-color-warning:        #8A4B0A;
  --vhd-color-info-bg:        #EAF1FB;
  --vhd-color-info:           #1A4FA0;

  --vhd-font-body:    system-ui, -apple-system, 'Archivo', sans-serif;
  /* Échelle typographique (Design System) — 6 paliers. AUCUNE taille de police
     en dur ailleurs : tout référence ces tokens (cohérence garantie). */
  --vhd-text-xs:      0.75rem;   /* 12px — libellés, badges, notes fines */
  --vhd-text-sm:      0.875rem;  /* 14px — texte secondaire, aides */
  --vhd-text-base:    1rem;      /* 16px — corps */
  --vhd-text-lg:      1.125rem;  /* 18px — accent / sous-titre */
  --vhd-text-xl:      1.25rem;   /* 20px — titres de section / résultat */
  --vhd-text-2xl:     1.5rem;    /* 24px — titre principal / grands chiffres */
  --vhd-space-2:      .5rem;
  --vhd-space-3:      .75rem;
  --vhd-space-4:      1rem;
  --vhd-space-6:      1.5rem;
  --vhd-radius-sm:    6px;
  --vhd-radius-md:    12px;
  --vhd-radius-full:  9999px;
  --vhd-shadow-sm:    0 2px 8px rgba(14,27,46,0.06);
  --vhd-shadow-md:    0 4px 16px rgba(14,27,46,0.09);
  --vhd-container:    720px;
  --vhd-duration:     180ms;

  font-family:     var(--vhd-font-body);
  color:           var(--vhd-color-text-body);
  background:      var(--vhd-color-surface-alt);
  min-height:      100vh;
  padding:         var(--vhd-space-4);
}

/* ── Canvas header ─────────────────────────────────────────────────── */
.vhd-canvas { margin: 0; padding: 0; background: var(--vhd-color-surface-alt); }
.vhd-canvas__header {
  display:     flex;
  align-items: center;
  padding:     var(--vhd-space-3) var(--vhd-space-4);
  background:  var(--vhd-color-primary);
  color:       #fff;
}
.vhd-canvas__back {
  color:           rgba(255,255,255,0.85);
  text-decoration: none;
  font-size:       var(--vhd-text-sm);
  font-weight:     500;
}
.vhd-canvas__back:hover { color: #fff; }
/* En-tête : sous-titre (kicker) + accroche. Sans cette règle les deux <span>
   de renderHeaderSub se collaient (« officiellesObtenez », « PR6000031DQuelle »).
   Flex + gap les sépare (espace sur une ligne, retour propre si trop étroit). */
.vhd-canvas__subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vhd-canvas__subtitle { font-weight: 700; }
.vhd-canvas__tagline { font-weight: 400; opacity: 0.92; }
/* Dédoublonnage timeline (SEO-safe) : masque le bloc serveur [data-fo="timeline"]
   (canvas__after) quand le JS affiche un résultat (classe vhu-has-result posée par
   app.js). Le rendu sans-JS ne reçoit jamais cette classe → la timeline serveur
   reste indexable par Google. Évite la section « étapes » affichée deux fois. */
#vhu-root.vhu-has-result [data-fo="timeline"] { display: none; }
.vhd-canvas__main {
  max-width: var(--vhd-container);
  margin:    0 auto;
  padding:   var(--vhd-space-6) var(--vhd-space-4);
}

/* ── Module section ─────────────────────────────────────────────────── */
.vhd-module-section {
  background:    var(--vhd-color-surface);
  border-radius: var(--vhd-radius-md);
  box-shadow:    var(--vhd-shadow-sm);
  padding:       var(--vhd-space-6);
  margin-bottom: var(--vhd-space-6);
}
.vhd-module-section__title {
  font-size:     var(--vhd-text-xl);
  font-weight:   700;
  color:         var(--vhd-color-text-headline);
  margin:        0 0 var(--vhd-space-2);
  display:       flex;
  align-items:   center;
  gap:           .5rem;
}
.vhd-module-section__sub {
  color:         var(--vhd-color-text-muted);
  font-size:     var(--vhd-text-sm);
  margin:        0 0 var(--vhd-space-4);
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.vhd-btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  background:      var(--vhd-color-primary);
  color:           #fff;
  border:          none;
  border-radius:   var(--vhd-radius-full);
  padding:         .75rem 1.5rem;
  font-size:       var(--vhd-text-base);
  font-weight:     600;
  transition:      background var(--vhd-duration);
  cursor:          pointer;
}
.vhd-btn-primary:hover    { background: var(--vhd-color-primary-dark); }
.vhd-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.vhd-btn-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  background:      transparent;
  color:           var(--vhd-color-primary);
  border:          1.5px solid var(--vhd-color-primary);
  border-radius:   var(--vhd-radius-full);
  padding:         .75rem 1.5rem;
  font-size:       var(--vhd-text-base);
  font-weight:     700;
  transition:      all var(--vhd-duration);
  cursor:          pointer;
}
.vhd-btn-secondary:hover    { background: var(--vhd-color-primary-light); }
.vhd-btn-secondary:disabled { opacity: .45; cursor: not-allowed; }

/* ── CTA row ──────────────────────────────────────────────────────────── */
.vhd-cta-row {
  display:     flex;
  gap:         var(--vhd-space-3);
  flex-wrap:   wrap;
  margin-top:  var(--vhd-space-4);
  /* Aligner les boutons par le HAUT : le 1er item (cta-main) est une colonne
     bouton + sous-texte, donc plus haut. Sans ça (align-items:stretch par
     défaut) les boutons « Appelez »/« Télécharger » s'étirent et se décalent. */
  align-items: flex-start;
}
/* Tous les boutons de la rangée à la MÊME hauteur (le sous-texte du 1er pend
   dessous, sans pousser les autres). */
.vhd-cta-row > .vhd-cta-main > .vhd-cta-rappel,
.vhd-cta-row > .vhd-cta-call,
.vhd-cta-row > .vhd-cta-pdf { min-height: 48px; }

/* DS — COMPOSANT « bloc repliable » (disclosure). Source UNIQUE pour le lexique,
   les références, et tout futur <details> : MÊME marqueur, MÊME summary partout
   (classes partagées vhd-fold / vhd-fold__summary posées par FoServerRender). */
.vhd-fold__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.vhd-fold__summary::-webkit-details-marker { display: none; }
.vhd-fold__summary::before {
  content: "▸";
  font-size: .8em;
  line-height: 1;
  color: var(--vhd-color-text-muted);
  transition: transform var(--vhd-duration);
}
.vhd-fold[open] > .vhd-fold__summary::before { transform: rotate(90deg); }
/* Repli natif des <details> : forcer le masquage du contenu quand fermé.
   Certains contextes de rendu n'appliquent pas le collapse natif (constaté :
   proof ET lexique restaient déroulés). Corrige tous les <details> du FO. */
#vhu-root details:not([open]) > :not(summary) { display: none !important; }

/* ── Réassurance ──────────────────────────────────────────────────────── */
.vhd-reassurance {
  display:    flex;
  gap:        var(--vhd-space-4);
  flex-wrap:  wrap;
  margin:     var(--vhd-space-3) 0 var(--vhd-space-4);
}
.vhd-reassurance__item {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-muted);
}

/* ── Barre de progression wizard ─────────────────────────────────────── */
.vhd-progress-bar {
  display:        flex;
  align-items:    center;
  margin-bottom:  var(--vhd-space-6);
  overflow-x:     auto;
}
.vhd-progress-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .25rem;
  min-width:      60px;
}
.vhd-progress-step__dot {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--vhd-text-xs);
  font-weight:     700;
  background:      var(--vhd-color-border);
  color:           var(--vhd-color-text-muted);
  border:          2px solid var(--vhd-color-border);
  transition:      all var(--vhd-duration);
}
.vhd-progress-step--active .vhd-progress-step__dot {
  background:  var(--vhd-color-primary);
  border-color: var(--vhd-color-primary);
  color:       #fff;
}
.vhd-progress-step--done .vhd-progress-step__dot {
  background:  var(--vhd-color-success);
  border-color: var(--vhd-color-success);
  color:       #fff;
}
.vhd-progress-step__label {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  text-align: center;
}
.vhd-progress-connector {
  flex:          1;
  height:        2px;
  background:    var(--vhd-color-border);
  min-width:     16px;
  margin-bottom: 14px;
}
.vhd-progress-connector--done { background: var(--vhd-color-success); }

/* ── Question ──────────────────────────────────────────────────────────── */
.vhd-step-question {
  font-size:     var(--vhd-text-lg);
  font-weight:   700;
  color:         var(--vhd-color-text-headline);
  margin:        var(--vhd-space-4) 0 var(--vhd-space-3);
}
.vhd-option-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--vhd-space-3);
  margin-bottom:         var(--vhd-space-4);
}
.vhd-option-card {
  background:    var(--vhd-color-surface);
  border:        1.5px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3);
  text-align:    left;
  cursor:        pointer;
  transition:    all var(--vhd-duration);
  display:       flex;
  flex-direction: column;
  gap:           .25rem;
}
.vhd-option-card:hover { border-color: var(--vhd-color-primary); background: var(--vhd-color-primary-light); }
.vhd-option-card--selected {
  border-color: var(--vhd-color-primary);
  background:   var(--vhd-color-primary-light);
  box-shadow:   0 0 0 2px var(--vhd-color-primary);
}
.vhd-option-card__title { font-weight: 600; font-size: var(--vhd-text-sm); color: var(--vhd-color-text-headline); }
.vhd-option-card__desc  { font-size: var(--vhd-text-sm); color: var(--vhd-color-text-muted); }
.vhd-step-nav { display: flex; gap: var(--vhd-space-3); justify-content: space-between; margin-top: var(--vhd-space-4); }

/* ── Loading / Erreur ─────────────────────────────────────────────────── */
.vhd-loading {
  text-align: center;
  padding:    var(--vhd-space-8, 2rem);
  color:      var(--vhd-color-text-muted);
  font-size:  var(--vhd-text-sm);
}
.vhd-error-card {
  background:    var(--vhd-color-error-bg);
  border:        1.5px solid var(--vhd-color-error);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
  color:         var(--vhd-color-error);
  display:       flex;
  flex-direction: column;
  gap:           var(--vhd-space-3);
}

/* ── Alertes ─────────────────────────────────────────────────────────── */
.vhd-alert {
  display:       flex;
  gap:           var(--vhd-space-3);
  align-items:   flex-start;
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  border-radius: var(--vhd-radius-sm);
  margin-bottom: var(--vhd-space-3);
}
.vhd-alert--error   { background: var(--vhd-color-error-bg);   border: 1px solid var(--vhd-color-error);   color: var(--vhd-color-error); }
.vhd-alert--warning { background: var(--vhd-color-warning-bg); border: 1px solid var(--vhd-color-warning); color: var(--vhd-color-warning); }
.vhd-alert--info    { background: var(--vhd-color-info-bg);    border: 1px solid var(--vhd-color-info);    color: var(--vhd-color-info); }
.vhd-alert__ic { flex-shrink: 0; }
.vhd-alert__title { font-weight: 700; margin-bottom: .25rem; }
.vhd-alert__text  { font-size: var(--vhd-text-sm); }

/* ── Résultat ─────────────────────────────────────────────────────────── */
.vhd-result-card {
  background:    var(--vhd-color-surface);
  border-radius: var(--vhd-radius-md);
  box-shadow:    var(--vhd-shadow-md);
  padding:       var(--vhd-space-6);
}
.vhd-result-card__header {
  display:       flex;
  align-items:   center;
  gap:           var(--vhd-space-3);
  margin-bottom: var(--vhd-space-4);
  padding-bottom: var(--vhd-space-3);
  border-bottom: 1.5px solid var(--vhd-color-border);
}
.vhd-result-card__icon { color: var(--vhd-color-success); }
.vhd-result-card__title { font-size: var(--vhd-text-xl); font-weight: 700; color: var(--vhd-color-text-headline); margin: 0; }

/* Checklist */
.vhd-checklist-header {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  margin-bottom:  var(--vhd-space-3);
}
.vhd-checklist-title { font-size: var(--vhd-text-base); font-weight: 600; color: var(--vhd-color-text-headline); margin: 0; }
.vhd-counter         { font-size: var(--vhd-text-sm); color: var(--vhd-color-text-muted); }
.vhd-checklist       { list-style: none; padding: 0; margin: 0; }
.vhd-checklist__item {
  display:        flex;
  gap:            var(--vhd-space-3);
  align-items:    flex-start;
  padding:        var(--vhd-space-3) 0;
  border-bottom:  1px solid var(--vhd-color-border);
}
.vhd-checklist__item:last-child { border-bottom: none; }
.vhd-checklist__item--delta .vhd-checklist__label { color: var(--vhd-color-primary); }
.vhd-checklist__check { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--vhd-color-success); margin-top: 2px; cursor: pointer; }
.vhd-checklist__text  { flex: 1; }
.vhd-checklist__label { font-weight: 600; font-size: var(--vhd-text-sm); display: block; margin-bottom: .2rem; }
.vhd-checklist__cerfa { font-size: var(--vhd-text-xs); background: var(--vhd-color-primary-light); color: var(--vhd-color-primary); border-radius: 4px; padding: 1px 6px; margin-right: .4rem; }
.vhd-checklist__delta { font-size: var(--vhd-text-xs); color: var(--vhd-color-text-muted); font-style: italic; }
.vhd-checklist__detail { font-size: var(--vhd-text-sm); color: var(--vhd-color-text-muted); margin-top: .2rem; }
.vhd-checklist__check:checked + .vhd-checklist__text .vhd-checklist__label { text-decoration: line-through; color: var(--vhd-color-text-muted); }

/* Source note */
.vhd-source-note { font-size: var(--vhd-text-xs); color: var(--vhd-color-text-muted); margin-top: .3rem; }

/* Mode d'emploi */
.vhd-mode-emploi {
  margin-top:    var(--vhd-space-4);
  padding:       var(--vhd-space-4);
  background:    var(--vhd-color-surface-alt);
  border-radius: var(--vhd-radius-sm);
  border:        1px solid var(--vhd-color-border);
}
.vhd-mode-emploi h4 { margin: 0 0 var(--vhd-space-3); font-size: var(--vhd-text-sm); font-weight: 700; }
.vhd-mode-emploi ol { margin: 0; padding-left: 1.2rem; }
.vhd-mode-emploi li { font-size: var(--vhd-text-sm); color: var(--vhd-color-text-body); margin-bottom: .4rem; }

/* Agrément */
.vhd-agrement-note {
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-text-muted);
  border-top:    1px solid var(--vhd-color-border);
  padding-top:   var(--vhd-space-3);
  margin-top:    var(--vhd-space-4);
}

/* Aria live */
.screen-reader-text {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0 0 0 0);
  white-space: nowrap;
  border:     0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .vhd-option-grid { grid-template-columns: 1fr 1fr; }
  .vhd-progress-step__label { display: none; }
  .vhd-canvas__main { padding: var(--vhd-space-3) var(--vhd-space-3); }
  .vhd-module-section { padding: var(--vhd-space-4); }
}

/* ── Polices locales (woff2 depuis assets/fonts/) ─────────────────────── */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:local('Fraunces Italic'),
url('/wp-content/plugins/vhu-assistant/assets/dist/vhd/../fonts/Fraunces-Italic.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:local('Archivo Regular'),
url('/wp-content/plugins/vhu-assistant/assets/dist/vhd/../fonts/Archivo-Regular.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:local('Archivo Medium'),
url('/wp-content/plugins/vhu-assistant/assets/dist/vhd/../fonts/Archivo-Medium.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:local('Archivo SemiBold'),
url('/wp-content/plugins/vhu-assistant/assets/dist/vhd/../fonts/Archivo-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:local('Archivo Bold'),
url('/wp-content/plugins/vhu-assistant/assets/dist/vhd/../fonts/Archivo-Bold.woff2') format('woff2');}

/* Mise à jour du token body-font pour utiliser Archivo */
#vhu-root { --vhd-font-body: 'Archivo', system-ui, -apple-system, sans-serif; }
.vhd-canvas__header__title, .vhd-result-card__title, .vhd-module-section__title {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* ── Pont P3 — Timeline "Et après ?" ──────────────────────────────────── */
.vhd-timeline-section {
  margin-top:    var(--vhd-space-6);
  padding:       var(--vhd-space-4);
  background:    var(--vhd-color-surface-alt);
  border-radius: var(--vhd-radius-md);
  border:        1px solid var(--vhd-color-border);
}
.vhd-timeline-section__title {
  font-size:   var(--vhd-text-lg);
  font-weight: 700;
  color:       var(--vhd-color-text-headline);
  margin-bottom: var(--vhd-space-3);
}
.vhd-timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vhd-space-3);
}
.vhd-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: var(--vhd-space-3);
}
.vhd-timeline__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--vhd-color-primary);
  color: #fff;
  border-radius: var(--vhd-radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--vhd-text-xs); font-weight: 700;
}
.vhd-timeline__text {
  flex: 1;
  font-size: var(--vhd-text-sm);
  color: var(--vhd-color-text-body);
  padding-top: 3px;
}

/* ── Levier P6 — Réglementation ────────────────────────────────────────── */
.vhd-legal-lever {
  margin-top:  var(--vhd-space-4);
  padding:     var(--vhd-space-3) var(--vhd-space-4);
  /* Couleur d'INSTANCE (pas un bleu info fixe) : l'encart reste dans la
     palette de la thématique (vert cva / bleu vhd / rouge lep). */
  background:  var(--vhd-color-primary-light);
  border-left: 4px solid var(--vhd-color-primary);
  border-radius: var(--vhd-radius-md);
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-body);
  display:     flex; gap: var(--vhd-space-2); align-items: flex-start;
}
.vhd-legal-lever__ic { color: var(--vhd-color-primary); }

/* ── Zone CTA ─────────────────────────────────────────────────────────── */
.vhd-cta-zone {
  margin-top:    var(--vhd-space-6);
  display:       flex;
  flex-direction: column;
  gap:           var(--vhd-space-3);
}
.vhd-btn-cta {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           var(--vhd-space-2);
  background:    var(--vhd-color-primary);
  color:         #fff;
  text-decoration: none;
  border:        none;
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-6);
  font-size:     var(--vhd-text-base);
  font-weight:   700;
  cursor:        pointer;
  font-family:   inherit;
  text-align:    center;
}
.vhd-btn-cta:hover { background: var(--vhd-color-primary-dark); }
.vhd-btn-cta:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }
.vhd-btn-tel {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--vhd-space-2);
  border:        2px solid var(--vhd-color-primary);
  color:         var(--vhd-color-primary);
  text-decoration: none;
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  font-size:     var(--vhd-text-base);
  font-weight:   600;
  background:    #fff;
  font-family:   inherit;
}
.vhd-btn-tel:hover { background: var(--vhd-color-primary-light); }
.vhd-btn-pdf {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--vhd-space-2);
  border:        1px solid var(--vhd-color-border);
  color:         var(--vhd-color-text-body);
  background:    var(--vhd-color-surface);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  font-size:     var(--vhd-text-sm);
  cursor:        pointer;
  font-family:   inherit;
}
.vhd-btn-pdf:hover { background: var(--vhd-color-surface-alt); }

/* ── I1a — Navigation onglets (pills skin A) ──────────────────────────── */
.vhd-app-wrap { max-width: var(--vhd-container); margin: 0 auto; }
.vhd-tabs-wrap { margin-bottom: var(--vhd-space-4); }
.vhd-tabs {
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--vhd-space-2);
  padding:        var(--vhd-space-3) 0;
  border-bottom:  2px solid var(--vhd-color-border);
}
.vhd-tab-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  padding:        .45rem .9rem;
  border-radius:  var(--vhd-radius-full);
  border:         1.5px solid var(--vhd-color-border);
  background:     var(--vhd-color-surface);
  color:          var(--vhd-color-text-muted);
  font-size:      var(--vhd-text-sm);
  font-weight:    500;
  cursor:         pointer;
  transition:     background var(--vhd-duration), border-color var(--vhd-duration), color var(--vhd-duration);
  font-family:    inherit;
}
.vhd-tab-pill:hover {
  border-color: var(--vhd-color-primary);
  color:        var(--vhd-color-primary);
  background:   var(--vhd-color-primary-light);
}
.vhd-tab-pill--active {
  background:   var(--vhd-color-primary);
  border-color: var(--vhd-color-primary);
  color:        #fff;
  font-weight:  600;
}
.vhd-tab-pill--active svg { stroke: #fff; }
.vhd-panel[hidden] { display: none; }

/* ── I1a — Module A — Grille des raisons REP ───────────────────────────── */
.vhd-reasons-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   var(--vhd-space-4);
  margin:                var(--vhd-space-4) 0;
}
.vhd-reason-card {
  display:       flex;
  gap:           var(--vhd-space-3);
  background:    var(--vhd-color-surface-alt);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
}
.vhd-reason-card__num {
  font-size:    var(--vhd-text-xl);
  font-weight:  800;
  color:        var(--vhd-color-primary);
  min-width:    1.5rem;
  line-height:  1;
}
.vhd-reason-card__titre {
  font-weight:   600;
  font-size:     var(--vhd-text-sm);
  margin-bottom: .25rem;
  color:         var(--vhd-color-text-headline);
}
.vhd-reason-card__texte {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-body);
  line-height: 1.5;
}
.vhd-source-global {
  display:     flex;
  align-items: flex-start;
  gap:         .4rem;
  color:       var(--vhd-color-text-muted);
  font-size:   var(--vhd-text-sm);
  margin-top:  var(--vhd-space-3);
}

/* ── I1a — Module B — Grille scénarios ─────────────────────────────────── */
.vhd-scenario-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   var(--vhd-space-4);
  margin:                var(--vhd-space-4) 0;
}
.vhd-scenario-card {
  background:    var(--vhd-color-surface-alt);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
}
.vhd-scenario-card--highlight {
  border-color: var(--vhd-color-primary);
  background:   var(--vhd-color-primary-light);
}
.vhd-scenario-card__header {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    flex-start;
  gap:            .4rem;
  margin-bottom:  var(--vhd-space-2);
}
.vhd-scenario-card__titre {
  font-weight:  700;
  font-size:    var(--vhd-text-sm);
  color:        var(--vhd-color-text-headline);
  flex:         1;
}
.vhd-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .25rem;
  font-size:     var(--vhd-text-xs);
  font-weight:   600;
  padding:       .15rem .5rem;
  border-radius: var(--vhd-radius-full);
}
.vhd-badge--agree {
  background: var(--vhd-color-success-bg);
  color:      var(--vhd-color-success);
}
.vhd-scenario-card__points {
  padding:    0 0 0 1rem;
  margin:     var(--vhd-space-2) 0;
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-body);
  line-height: 1.6;
}
.vhd-scenario-card__conseil {
  display:     flex;
  align-items: flex-start;
  gap:         .4rem;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-info);
  background:  var(--vhd-color-info-bg);
  border-radius: var(--vhd-radius-sm);
  padding:     var(--vhd-space-2) var(--vhd-space-3);
  margin-top:  var(--vhd-space-2);
}

/* ── I1a — Module D — Procédure résiliation ────────────────────────────── */
.vhd-cerfa-banner {
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  background:    var(--vhd-color-primary-light);
  border:        1px solid var(--vhd-color-primary);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-primary-dark);
  margin-bottom: var(--vhd-space-4);
}
.vhd-procedure-steps {
  padding:    0 0 0 1.2rem;
  margin:     var(--vhd-space-2) 0 var(--vhd-space-4);
}
.vhd-procedure-step {
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-body);
  line-height: 1.6;
  margin-bottom: .4rem;
}
.vhd-legal-note {
  display:       flex;
  align-items:   flex-start;
  gap:           .5rem;
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-info);
  background:    var(--vhd-color-info-bg);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  margin-bottom: var(--vhd-space-3);
}

/* ── I1a — Passerelle E (aides renouvellement) ──────────────────────────── */
.vhd-passerelle-e {
  border:        1px dashed var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
  margin-top:    var(--vhd-space-6);
  background:    var(--vhd-color-surface-alt);
}
.vhd-passerelle-e__title {
  display:     block;
  font-weight: 600;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-headline);
  margin-bottom: .4rem;
}
.vhd-passerelle-e__text {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-muted);
  margin:     0 0 var(--vhd-space-3);
}

/* ── Utilitaire accessibilité ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ── I1b — Formulaires (S2, S3, F) ───────────────────────────────────── */
.vhd-form-group {
  display:       flex;
  flex-direction: column;
  gap:           .3rem;
  margin-bottom: var(--vhd-space-4);
}
.vhd-form-label {
  font-size:   var(--vhd-text-sm);
  font-weight: 600;
  color:       var(--vhd-color-text-headline);
}
.vhd-form-input,
.vhd-form-select {
  width:         100%;
  background:    var(--vhd-color-surface);
  border:        1.5px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       .55rem .75rem;
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-text-body);
  transition:    border-color var(--vhd-duration);
}
.vhd-form-input:focus,
.vhd-form-select:focus {
  border-color: var(--vhd-color-primary);
  outline:      none;
}
.vhd-form-hint {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-muted);
  margin:     0;
}
.vhd-form-row {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       var(--vhd-space-4);
}
.vhd-input-addon {
  display:  flex;
  align-items: stretch;
}
.vhd-input-addon .vhd-form-input {
  border-right:        none;
  border-radius:       var(--vhd-radius-sm) 0 0 var(--vhd-radius-sm);
  flex:                1;
}
.vhd-input-addon__unit {
  background:    var(--vhd-color-surface-alt);
  border:        1.5px solid var(--vhd-color-border);
  border-left:   none;
  border-radius: 0 var(--vhd-radius-sm) var(--vhd-radius-sm) 0;
  padding:       0 .65rem;
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-text-muted);
  display:       flex;
  align-items:   center;
  white-space:   nowrap;
}
.vhd-radio-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--vhd-space-3);
  margin-top: .25rem;
}
.vhd-radio-item {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-body);
  cursor:      pointer;
}
.vhd-radio-item input[type="radio"] { accent-color: var(--vhd-color-primary); }

/* ── I1b — Module S2 — Grille de stats ───────────────────────────────── */
.vhd-stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:                   var(--vhd-space-3);
  margin:                var(--vhd-space-4) 0;
}
.vhd-stat-card {
  background:    var(--vhd-color-surface-alt);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           .25rem;
}
.vhd-stat-card__icon { color: var(--vhd-color-primary); margin-bottom: .25rem; }
.vhd-stat-card__value {
  font-size:   var(--vhd-text-2xl);
  font-weight: 800;
  color:       var(--vhd-color-text-headline);
  line-height: 1.1;
}
.vhd-stat-card__unit {
  font-size:  var(--vhd-text-xs);
  font-weight: 600;
  color:       var(--vhd-color-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vhd-stat-card__label {
  font-size:  var(--vhd-text-sm);
  font-weight: 600;
  color:       var(--vhd-color-text-headline);
  margin-top:  .2rem;
}
.vhd-stat-card__note {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  line-height: 1.3;
  margin-top:  .2rem;
}
.vhd-calc-note {
  display:     flex;
  align-items: flex-start;
  gap:         .35rem;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-muted);
  margin:      var(--vhd-space-3) 0;
}

/* ── I1b — Sources ───────────────────────────────────────────────────── */
.vhd-sources-block {
  margin-top:  var(--vhd-space-4);
  padding:     var(--vhd-space-3) var(--vhd-space-4);
  background:  var(--vhd-color-surface-alt);
  border-radius: var(--vhd-radius-sm);
  border:      1px solid var(--vhd-color-border);
}
.vhd-sources-block__label {
  font-size:   var(--vhd-text-sm);
  font-weight: 600;
  color:       var(--vhd-color-text-muted);
  margin-bottom: .3rem;
  display:     block;
}
.vhd-sources-list {
  list-style:  none;
  padding:     0;
  margin:      0;
}
.vhd-sources-list li {
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-muted);
  padding:     .15rem 0;
}

/* ── I1b — Passerelle aides (S2 → F) ────────────────────────────────── */
.vhd-aides-gateway {
  margin-top:    var(--vhd-space-6);
  padding:       var(--vhd-space-4);
  background:    var(--vhd-color-success-bg);
  border:        1px solid var(--vhd-color-success);
  border-radius: var(--vhd-radius-md);
}
.vhd-aides-gateway__title {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   var(--vhd-text-base);
  font-weight: 700;
  color:       var(--vhd-color-text-headline);
  margin:      0 0 var(--vhd-space-3);
}
.vhd-aides-gateway__empty {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-muted);
  margin:     0 0 var(--vhd-space-3);
}
.vhd-aides-gateway__date {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  margin-top: var(--vhd-space-2);
}

/* ── I1b — Liste d'aides compacte (S2 gateway) ───────────────────────── */
.vhd-aides-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--vhd-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--vhd-space-2);
}
.vhd-aide-item {
  background:    var(--vhd-color-surface);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3);
}
.vhd-aide-item__label {
  font-weight: 600;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-headline);
  margin-bottom: .2rem;
}
.vhd-aide-item__montant {
  font-size:   var(--vhd-text-sm);
  font-weight: 700;
  color:       var(--vhd-color-success);
}
.vhd-aide-item__condition {
  font-size: var(--vhd-text-sm);
  color:     var(--vhd-color-text-muted);
  margin-top: .15rem;
}
.vhd-aide-item__source {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  margin-top: .15rem;
}

/* ── I1b — Module F — Cartes d'aides complètes ───────────────────────── */
.vhd-aides-list-full {
  display:        flex;
  flex-direction: column;
  gap:            var(--vhd-space-4);
  margin:         var(--vhd-space-4) 0;
}
.vhd-aide-card {
  background:    var(--vhd-color-surface);
  border:        1.5px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
  padding:       var(--vhd-space-4);
  box-shadow:    var(--vhd-shadow-sm);
}
.vhd-aide-card__header {
  display:     flex;
  align-items: center;
  gap:         var(--vhd-space-2);
  margin-bottom: var(--vhd-space-2);
}
.vhd-aide-card__icon { color: var(--vhd-color-primary); flex-shrink: 0; }
.vhd-aide-card__label {
  font-weight: 700;
  font-size:   var(--vhd-text-base);
  color:       var(--vhd-color-text-headline);
  flex:        1;
}
.vhd-aide-card__statut {
  font-size:     var(--vhd-text-xs);
  font-weight:   600;
  padding:       .15rem .5rem;
  border-radius: var(--vhd-radius-full);
  background:    var(--vhd-color-success-bg);
  color:         var(--vhd-color-success);
  white-space:   nowrap;
}
.vhd-aide-card__montant {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--vhd-text-lg);
  font-weight: 800;
  color:       var(--vhd-color-success);
  margin-bottom: var(--vhd-space-2);
}
.vhd-aide-card__condition {
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-body);
  margin-bottom: var(--vhd-space-2);
  line-height: 1.5;
}
.vhd-aide-card__source {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
}
.vhd-aide-card__source a {
  color: var(--vhd-color-primary);
  text-decoration: underline;
}
.vhd-aide-card__date {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  margin-top: .25rem;
}
.vhd-aides-empty {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-muted);
  padding:    var(--vhd-space-4);
  text-align: center;
  background: var(--vhd-color-surface-alt);
  border-radius: var(--vhd-radius-sm);
  border:     1px dashed var(--vhd-color-border);
}
.vhd-precheck-badge {
  font-size:     var(--vhd-text-xs);
  font-weight:   600;
  padding:       .15rem .5rem;
  border-radius: var(--vhd-radius-full);
  background:    var(--vhd-color-info-bg);
  color:         var(--vhd-color-info);
}

/* ── I1b — Disclaimer ────────────────────────────────────────────────── */
.vhd-disclaimer {
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-muted);
  margin:      var(--vhd-space-3) 0;
  display:     flex;
  align-items: flex-start;
  gap:         .4rem;
}
.vhd-disclaimer--prominent {
  background:    var(--vhd-color-warning-bg);
  border:        1px solid var(--vhd-color-warning);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
  color:         var(--vhd-color-warning);
  font-weight:   500;
}
.vhd-result-card__date {
  font-size:  var(--vhd-text-sm);
  color:      var(--vhd-color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── I1b — Module S3 — Blocs juridiques ─────────────────────────────── */
.vhd-centres-block {
  margin-top:  var(--vhd-space-4);
}
.vhd-centres-block__title,
.vhd-procedure-block__title,
.vhd-fondements-block__title,
.vhd-courrier-block__title {
  font-size:     var(--vhd-text-sm);
  font-weight:   700;
  color:         var(--vhd-color-text-headline);
  margin:        0 0 var(--vhd-space-3);
  padding-bottom: var(--vhd-space-2);
  border-bottom: 1px solid var(--vhd-color-border);
}
.vhd-centres-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vhd-space-3);
}
.vhd-centre-item {
  background:    var(--vhd-color-surface-alt);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-3) var(--vhd-space-4);
}
.vhd-centre-item__nom {
  font-weight:   600;
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-text-headline);
  margin-bottom: .2rem;
}
.vhd-centre-item__adresse,
.vhd-centre-item__tel {
  font-size: var(--vhd-text-sm);
  color:     var(--vhd-color-text-muted);
}
.vhd-centre-item__agrement {
  font-size:     var(--vhd-text-xs);
  font-weight:   600;
  padding:       .1rem .4rem;
  border-radius: var(--vhd-radius-full);
  background:    var(--vhd-color-success-bg);
  color:         var(--vhd-color-success);
  display:       inline-block;
  margin-top:    .3rem;
}
.vhd-fondements-block {
  margin-top: var(--vhd-space-4);
}
.vhd-fondements-badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--vhd-space-2);
  margin-top: var(--vhd-space-2);
}
.vhd-procedure-block {
  margin-top: var(--vhd-space-4);
}
.vhd-delai-block {
  margin-top:  var(--vhd-space-3);
  padding:     var(--vhd-space-3) var(--vhd-space-4);
  background:  var(--vhd-color-warning-bg);
  border-left: 4px solid var(--vhd-color-warning);
  border-radius: 0 var(--vhd-radius-sm) var(--vhd-radius-sm) 0;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-warning);
}
.vhd-courrier-block {
  margin-top: var(--vhd-space-4);
}
.vhd-courrier-pre {
  background:    var(--vhd-color-surface);
  border:        1.5px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-sm);
  padding:       var(--vhd-space-4);
  font-family:   var(--vhd-font-body);
  font-size:     var(--vhd-text-sm);
  color:         var(--vhd-color-text-body);
  white-space:   pre-wrap;
  word-break:    break-word;
  line-height:   1.6;
  max-height:    320px;
  overflow-y:    auto;
}
.vhd-copy-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  background:      var(--vhd-color-surface-alt);
  border:          1.5px solid var(--vhd-color-border);
  border-radius:   var(--vhd-radius-full);
  padding:         .4rem .9rem;
  font-size:       var(--vhd-text-sm);
  font-weight:     500;
  color:           var(--vhd-color-text-body);
  cursor:          pointer;
  transition:      all var(--vhd-duration);
  margin-top:      var(--vhd-space-2);
}
.vhd-copy-btn:hover { background: var(--vhd-color-primary-light); border-color: var(--vhd-color-primary); color: var(--vhd-color-primary); }
.vhd-relu-par {
  font-size:  var(--vhd-text-xs);
  color:      var(--vhd-color-text-muted);
  margin-top: var(--vhd-space-3);
  display:    flex;
  align-items: center;
  gap:        .3rem;
}

/* ── I1b — Responsive compléments ───────────────────────────────────── */
@media (max-width: 600px) {
  .vhd-form-row       { grid-template-columns: 1fr; }
  .vhd-stats-grid     { grid-template-columns: 1fr 1fr; }
  .vhd-aide-card__header { flex-wrap: wrap; }
  .vhd-result-card__date { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Lot I1-FO (Paire A) — blocs de conversion, infobulles, FAQ, CTA, preuve
   Scope : #vhu-root (acquis I1-FIX2). Light premium, tokens vhu_design.
   ════════════════════════════════════════════════════════════════════ */

/* P1 — phrase-mission */
#vhu-root .vhd-mission {
  max-width:     var(--vhd-container);
  margin:        1.25rem auto .25rem;
  padding:       1rem 1.25rem;
  background:    var(--vhd-color-primary-light);
  border-left:   4px solid var(--vhd-color-primary);
  border-radius: var(--vhd-radius-md);
  font-size:     var(--vhd-text-base);
  color:         var(--vhd-color-text-body);
}
#vhu-root .vhd-mission__lead {
  font-weight: 700;
  color:       var(--vhd-color-text-headline);
}

/* P3 — pont de conversion */
#vhu-root .vhd-bridge {
  margin:        1.25rem 0 .75rem;
  padding:       .9rem 1.1rem;
  background:    var(--vhd-color-surface-alt);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
  font-size:     var(--vhd-text-base);
  font-weight:   500;
  color:         var(--vhd-color-text-headline);
}

/* I1FO-02 — infobulle accessible (bouton ? + role=tooltip, :hover/:focus) */
#vhu-root .vhd-help { position: relative; display: inline-block; margin-left: .3rem; }
#vhu-root .vhd-help__btn {
  width: 18px; height: 18px;
  border: 1px solid var(--vhd-color-primary);
  border-radius: var(--vhd-radius-full);
  background: var(--vhd-color-surface);
  color: var(--vhd-color-primary);
  font-size: var(--vhd-text-xs); font-weight: 700; line-height: 1;
  cursor: help; padding: 0;
}
#vhu-root .vhd-help__btn:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }
#vhu-root .vhd-help__tip {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: 260px; max-width: 78vw;
  padding: .65rem .8rem;
  background: var(--vhd-color-text-headline); color: #fff;
  border-radius: var(--vhd-radius-sm);
  font-size: var(--vhd-text-sm); font-weight: 400; line-height: 1.45;
  box-shadow: var(--vhd-shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--vhd-duration) ease;
}
#vhu-root .vhd-help__btn:hover + .vhd-help__tip,
#vhu-root .vhd-help__btn:focus + .vhd-help__tip,
#vhu-root .vhd-help__btn:focus-visible + .vhd-help__tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  #vhu-root .vhd-help__tip { transition: none; }
}
#vhu-root .vhd-help-row {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin-top: .75rem; font-size: var(--vhd-text-sm); color: var(--vhd-color-text-muted);
}
#vhu-root .vhd-help-inline { display: inline-flex; align-items: center; }

/* I1FO-05 — lien de preuve + badges législation */
#vhu-root .vhd-proof {
  margin-left: .35rem;
  font-size: var(--vhd-text-sm);
  color: var(--vhd-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#vhu-root .vhd-proof:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }
/* Fraîcheur discrète (client 2026-06-16) : marqueur sobre, date au survol via
   title — AUCUNE date visible en permanence. <time> reste lisible par Google. */
#vhu-root .vhd-proof-fresh {
  display: inline-block; margin-left: .3rem; vertical-align: middle;
  line-height: 0; cursor: help;
}
#vhu-root .vhd-proof-fresh__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--vhd-color-success, #2e7d32); opacity: .55;
  transition: opacity .15s ease, transform .15s ease;
}
#vhu-root .vhd-proof-fresh:hover .vhd-proof-fresh__dot,
#vhu-root .vhd-proof-fresh:focus-visible .vhd-proof-fresh__dot {
  opacity: 1; transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  #vhu-root .vhd-proof-fresh__dot { transition: none; }
}
#vhu-root .vhd-proof__ok,
#vhu-root .vhd-proof__todo {
  display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
  border-radius: var(--vhd-radius-sm);
  font-size: var(--vhd-text-xs); font-weight: 700; letter-spacing: .03em;
  vertical-align: middle; white-space: nowrap;
}
#vhu-root .vhd-proof__ok   { background: var(--vhd-color-success-bg); color: var(--vhd-color-success); }
#vhu-root .vhd-proof__todo { background: var(--vhd-color-warning-bg); color: var(--vhd-color-warning); }
#vhu-root .vhd-proof-section {
  max-width: var(--vhd-container); margin: 1.5rem auto;
  padding: 1.1rem 1.25rem;
  background: var(--vhd-color-surface);
  border: 1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
}
#vhu-root .vhd-proof-section__title {
  margin: 0 0 .6rem; font-size: var(--vhd-text-lg); color: var(--vhd-color-text-headline);
}
#vhu-root .vhd-proof-list { margin: 0; padding-left: 1.1rem; }
#vhu-root .vhd-proof-item { margin: .45rem 0; font-size: var(--vhd-text-sm); color: var(--vhd-color-text-body); }
#vhu-root .vhd-legal-badge {
  display: inline-block; padding: .15rem .5rem;
  background: var(--vhd-color-primary-light); color: var(--vhd-color-primary-dark);
  border-radius: var(--vhd-radius-sm); font-size: var(--vhd-text-xs); font-weight: 600;
}
#vhu-root .vhd-legal-badge--link { text-decoration: none; }
#vhu-root .vhd-legal-badge--link:hover { text-decoration: underline; }

/* I1FO-04 — CTA par zone (rappel primaire / appel / PDF secondaire) */
#vhu-root .vhd-cta-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem;
  margin-top: 1rem;
}
#vhu-root .vhd-cta-main { display: inline-flex; flex-direction: column; gap: .25rem; }
#vhu-root .vhd-cta-rappel {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .75rem 1.5rem;
  background: var(--vhd-color-primary); color: #fff;
  border: none; border-radius: var(--vhd-btn-radius, var(--vhd-radius-full));
  font-size: var(--vhd-text-base); font-weight: 700; cursor: pointer;
  box-shadow: var(--vhd-shadow-sm);
  transition: background var(--vhd-duration) ease;
}
#vhu-root .vhd-cta-rappel:hover { background: var(--vhd-color-primary-dark); }
#vhu-root .vhd-cta-rappel:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }
#vhu-root .vhd-cta-sub { font-size: var(--vhd-text-sm); color: var(--vhd-color-text-muted); }
#vhu-root .vhd-cta-call {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .75rem 1.5rem;
  border: 1.5px solid var(--vhd-color-primary); border-radius: var(--vhd-btn-radius, var(--vhd-radius-full));
  color: var(--vhd-color-primary); font-weight: 700; font-size: var(--vhd-text-base); text-decoration: none;
}
#vhu-root .vhd-cta-call:hover { background: var(--vhd-color-primary-light); }
#vhu-root .vhd-cta-call:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }
#vhu-root .vhd-cta-pdf {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .75rem 1.5rem;
  background: var(--vhd-color-surface);
  border: 1.5px solid var(--vhd-color-border); border-radius: var(--vhd-btn-radius, var(--vhd-radius-full));
  color: var(--vhd-color-text-headline); font-weight: 700; font-size: var(--vhd-text-base); cursor: pointer;
}
#vhu-root .vhd-cta-pdf:hover { border-color: var(--vhd-color-primary); color: var(--vhd-color-primary); }
#vhu-root .vhd-cta-pdf:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: 2px; }

/* I1FO-06 — méta d'en-tête de résultat */
#vhu-root .vhd-result-meta {
  margin-left: auto;
  font-size: var(--vhd-text-sm);
  color: var(--vhd-color-text-muted);
  white-space: nowrap;
}

/* I1FO-03 — FAQ dynamique */
#vhu-root .vhd-canvas__after { max-width: var(--vhd-container); margin: 0 auto; padding: 0 1rem 2rem; }
#vhu-root .vhd-faq { margin: 1.5rem 0 0; }
#vhu-root .vhd-faq__title { font-size: var(--vhd-text-lg); color: var(--vhd-color-text-headline); margin-bottom: .6rem; }
#vhu-root .vhd-faq-item {
  border: 1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
  background: var(--vhd-color-surface);
  margin-bottom: .5rem; overflow: hidden;
}
/* FAQ = MÊME composant repliable que lexique/références (vhd-fold) : summary
   natif, marqueur ▸ à gauche (via .vhd-fold__summary), aucun chevron à droite. */
#vhu-root .vhd-faq-q {
  width: 100%; min-height: 44px; padding: 1rem 1.2rem;
  cursor: pointer; text-align: left;
  font-size: var(--vhd-text-lg); font-weight: 600;
  color: var(--vhd-color-text-headline);
}
#vhu-root .vhd-faq-q:focus-visible { outline: 2px solid var(--vhd-color-primary); outline-offset: -2px; }
#vhu-root .vhd-faq-a {
  padding: 0 1.2rem 1rem 1.6rem;
  font-size: var(--vhd-text-base); line-height: 1.55;
  color: var(--vhd-color-text-body);
}

/* I1FO-06 — méta d'en-tête de la page-outil (toggle showAuthor) */
#vhu-root .vhd-header-meta {
  margin-left: auto;
  margin-right: 1rem;
  font-size: var(--vhd-text-sm);
  color: var(--vhd-color-text-muted);
}

/* ── I1-FO (consensus) — compléments : header flex, lexique visible,
      panneau de rappel. Tokens vhu_design, light premium. ─────────────── */

/* Header canvas : back-link + méta + CTA zone header alignés */
.vhd-canvas__header {
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .75rem;
}
#vhu-root .vhd-canvas__header .vhd-cta-row { margin-top: 0; }
#vhu-root .vhd-canvas__header .vhd-cta-call {
  border-color: rgba(255,255,255,0.7);
  color:        #fff;
}
#vhu-root .vhd-canvas__header .vhd-cta-call:hover { background: rgba(255,255,255,0.12); }
#vhu-root .vhd-canvas__header .vhd-header-meta { color: rgba(255,255,255,0.85); }

/* I1FO-02 — lexique jargon visible (15 def_*, tooltips réellement câblés) */
#vhu-root .vhd-lexique {
  max-width:     var(--vhd-container);
  margin:        1.5rem auto 0;
  padding:       1.1rem 1.25rem;
  background:    var(--vhd-color-surface);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
}
#vhu-root .vhd-lexique__title {
  margin:    0 0 .6rem;
  font-size: var(--vhd-text-lg);
  color:     var(--vhd-color-text-headline);
}
/* DS — titres de section SECONDAIRES (lexique, références, liens utiles, FAQ) :
   exactement la MÊME taille/graisse/police (cohérence demandée 2026-06-23).
   « Liens utiles » était un <h2> non stylé (24px), proof/lexique des <summary>
   non gras (400). On force lg / 700 / Archivo pour les 4. Placé après les règles
   individuelles → l'emporte (même spécificité 1-1-0). */
#vhu-root .vhd-lexique__title,
#vhu-root .vhd-proof-section__title,
#vhu-root .vhd-links__title,
#vhu-root .vhd-faq__title,
#vhu-root .vhd-aides-gateway__title {
  font-size:   var(--vhd-text-lg);
  font-weight: 700;
  font-family: var(--vhd-font-body);
  color:       var(--vhd-color-text-headline);
  margin:      0 0 .6rem;
}
#vhu-root .vhd-lexique__list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem .9rem;
  margin:     0;
  padding:    0;
  list-style: none;
}
#vhu-root .vhd-lexique__item {
  display:     inline-flex;
  align-items: center;
  font-size:   var(--vhd-text-sm);
  color:       var(--vhd-color-text-body);
}
#vhu-root .vhd-lexique__term { font-weight: 600; color: var(--vhd-color-text-headline); }

/* I1FO-04 — panneau de rappel replié (P5, jamais de tel: forcé) */
#vhu-root .vhd-rappel-panel {
  margin:        .6rem 0 0;
  padding:       .85rem 1.1rem;
  background:    var(--vhd-color-primary-light);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
}
#vhu-root .vhd-rappel-panel__title {
  margin:    0 0 .5rem;
  font-size: var(--vhd-text-sm);
  color:     var(--vhd-color-text-muted);
}

/* ── Mode intégré (shortcode [vhu_app]) ───────────────────────────────────
   L'outil est posé DANS une page thémée (contour du thème autour). Le lien
   « retour au site » du mode pleine page n'a plus de sens ici (il renverrait
   hors de la page hôte) → masqué. Les classes des 3 skins sont listées (base
   commune à tous les dist ; les classes des skins inactifs sont absentes du DOM). */
.vhd-embed .vhd-canvas__back,
.vhd-embed .vhd-topbar__back,
.vhd-embed .vhd-masthead__retour { display: none !important; }

/* ── v0.3.0 (F2) — bloc de maillage interne sortant ────────────────────────
   Livré sans habillage en F2 : les liens s'affichaient en puces brutes, avec
   la couleur de lien par défaut du navigateur. Un bloc SEO qu'on n'assume pas
   visuellement se lit comme une ferme de liens ; celui-ci doit ressembler à ce
   qu'il est, une suite de lectures proposées. */
#vhu-root .vhd-maillage {
  max-width: var(--vhd-container);
  margin:    1.5rem auto;
  padding:   1.25rem 1.1rem 1.4rem;
  background:    var(--vhd-color-surface);
  border:        1px solid var(--vhd-color-border);
  border-radius: var(--vhd-radius-md);
}
#vhu-root .vhd-maillage__title {
  margin:      0 0 .85rem;
  font-size:   var(--vhd-text-lg);
  font-weight: 600;
  color:       var(--vhd-color-text-headline);
}
#vhu-root .vhd-maillage__list {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap:                   .45rem 1.5rem;
  margin:                0;
  padding:               0;
  list-style:            none;
}
#vhu-root .vhd-maillage__link {
  display:         inline-block;
  padding:         .2rem 0;
  font-size:       var(--vhd-text-sm);
  color:           var(--vhd-color-text-body);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--vhd-color-border);
}
#vhu-root .vhd-maillage__link:hover,
#vhu-root .vhd-maillage__link:focus-visible {
  color:                 var(--vhd-color-primary);
  text-decoration-color: currentColor;
}

/* ── v0.3.0 (F3) — navigation du site dans le canvas ───────────────────────
   Le canvas retire le chrome du thème : ce bloc est le pied de page de la
   page-outil. Colonnes fluides, aucun menu déroulant — il n'y a pas de
   JavaScript de thème pour le déplier, et un plan à plat se lit aussi bien
   au clavier qu'au doigt. Le trait supérieur le sépare du contenu de l'outil :
   c'est de la navigation, pas de la matière. */
#vhu-root .vhd-sitenav {
  margin:     2.5rem 0 0;
  padding:    1.75rem 1.1rem 2.25rem;
  border-top: 1px solid var(--vhd-color-border);
  background: var(--vhd-color-surface-alt);
}
/* `auto-fill` et non `auto-fit` : avec `auto-fit`, les pistes vides sont
   effondrées et les colonnes restantes s'étirent, si bien qu'un groupe d'un
   seul lien occupait un tiers de la largeur pendant que le groupe de dix
   restait serré. `auto-fill` garde la trame régulière quel que soit le nombre
   de groupes — constaté au rendu le 06/08 sur les cinq groupes du menu. */
#vhu-root .vhd-sitenav__inner {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap:                   1.5rem 2rem;
  max-width:             var(--vhd-container);
  margin:                0 auto;
  align-items:           start;
}
#vhu-root .vhd-sitenav__group-title {
  margin:         0 0 .6rem;
  font-size:      var(--vhd-text-sm);
  font-weight:    700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color:          var(--vhd-color-text-muted);
}
#vhu-root .vhd-sitenav__list { margin: 0; padding: 0; list-style: none; }
#vhu-root .vhd-sitenav__item { margin: 0 0 .35rem; }
#vhu-root .vhd-sitenav__link {
  font-size:       var(--vhd-text-sm);
  color:           var(--vhd-color-text-body);
  text-decoration: none;
  /* Cible tactile de 44 px (WCAG 2.5.8) obtenue par le REMPLISSAGE, jamais par
     `line-height`. Constaté au rendu le 06/08 : un line-height de 2.75rem
     s'applique à CHAQUE ligne, si bien qu'un libellé qui revient à la ligne
     — « Le Guide du Certificat de Destruction » — s'affichait avec deux lignes
     séparées de 44 px, comme deux liens distincts. Le remplissage, lui, borde
     le bloc entier quel que soit le nombre de lignes. */
  display:         inline-block;
  padding:         .55rem 0;
  line-height:     1.45;
  min-height:      1.45em;
}
#vhu-root .vhd-sitenav__link:hover,
#vhu-root .vhd-sitenav__link:focus-visible {
  color:           var(--vhd-color-primary);
  text-decoration: underline;
}
#vhu-root .vhd-sitenav__link[aria-current="page"] {
  font-weight: 600;
  color:       var(--vhd-color-primary);
}
/* Sur écran étroit la hauteur tactile devient de la place perdue : les liens
   sont déjà séparés par la grille à une colonne. */
@media (max-width: 600px) {
  #vhu-root .vhd-sitenav__link { padding: .45rem 0; }
  #vhu-root .vhd-sitenav { padding: 1.25rem .9rem 1.75rem; }
}
/* Mode intégré : le bloc n'est PAS émis (FoServerRender::marquerModeIntegre).
   Un display:none aurait laissé les vingt liens dans le HTML, donc le doublon
   de navigation aurait quand même été envoyé à l'indexation. Cette règle ne
   sert plus que de filet si un chemin de rendu oubliait le drapeau. */
.vhd-embed .vhd-sitenav { display: none; }