/*
 * VHU Assistant — Skin A (lep-) CSS
 * Préfixe FO : lep- (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(--lep-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 {
  --lep-color-primary:        #1A5A8C;
  --lep-color-primary-dark:   #134A73;
  --lep-color-primary-light:  #EAF1F8;
  --lep-color-surface:        #FFFFFF;
  --lep-color-surface-alt:    #F6F8FB;
  --lep-color-border:         #D5DEE9;
  --lep-color-text-headline:  #0E1B2E;
  --lep-color-text-body:      #324155;
  --lep-color-text-muted:     #5A6B82;
  --lep-color-error:          #B42318;
  --lep-color-error-bg:       #FEF1F0;
  --lep-color-success:        #15803D;
  --lep-color-success-bg:     #ECFBF1;
  --lep-color-warning-bg:     #FFF7E6;
  --lep-color-warning:        #8A4B0A;
  --lep-color-info-bg:        #EAF1FB;
  --lep-color-info:           #1A4FA0;

  --lep-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). */
  --lep-text-xs:      0.75rem;   /* 12px — libellés, badges, notes fines */
  --lep-text-sm:      0.875rem;  /* 14px — texte secondaire, aides */
  --lep-text-base:    1rem;      /* 16px — corps */
  --lep-text-lg:      1.125rem;  /* 18px — accent / sous-titre */
  --lep-text-xl:      1.25rem;   /* 20px — titres de section / résultat */
  --lep-text-2xl:     1.5rem;    /* 24px — titre principal / grands chiffres */
  --lep-space-2:      .5rem;
  --lep-space-3:      .75rem;
  --lep-space-4:      1rem;
  --lep-space-6:      1.5rem;
  --lep-radius-sm:    6px;
  --lep-radius-md:    12px;
  --lep-radius-full:  9999px;
  --lep-shadow-sm:    0 2px 8px rgba(14,27,46,0.06);
  --lep-shadow-md:    0 4px 16px rgba(14,27,46,0.09);
  --lep-container:    720px;
  --lep-duration:     180ms;

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

/* ── Canvas header ─────────────────────────────────────────────────── */
.lep-canvas { margin: 0; padding: 0; background: var(--lep-color-surface-alt); }
.lep-canvas__header {
  display:     flex;
  align-items: center;
  padding:     var(--lep-space-3) var(--lep-space-4);
  background:  var(--lep-color-primary);
  color:       #fff;
}
.lep-canvas__back {
  color:           rgba(255,255,255,0.85);
  text-decoration: none;
  font-size:       var(--lep-text-sm);
  font-weight:     500;
}
.lep-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). */
.lep-canvas__subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.lep-canvas__subtitle { font-weight: 700; }
.lep-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; }
.lep-canvas__main {
  max-width: var(--lep-container);
  margin:    0 auto;
  padding:   var(--lep-space-6) var(--lep-space-4);
}

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

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

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

/* ── CTA row ──────────────────────────────────────────────────────────── */
.lep-cta-row {
  display:     flex;
  gap:         var(--lep-space-3);
  flex-wrap:   wrap;
  margin-top:  var(--lep-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). */
.lep-cta-row > .lep-cta-main > .lep-cta-rappel,
.lep-cta-row > .lep-cta-call,
.lep-cta-row > .lep-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 lep-fold / lep-fold__summary posées par FoServerRender). */
.lep-fold__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.lep-fold__summary::-webkit-details-marker { display: none; }
.lep-fold__summary::before {
  content: "▸";
  font-size: .8em;
  line-height: 1;
  color: var(--lep-color-text-muted);
  transition: transform var(--lep-duration);
}
.lep-fold[open] > .lep-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 ──────────────────────────────────────────────────────── */
.lep-reassurance {
  display:    flex;
  gap:        var(--lep-space-4);
  flex-wrap:  wrap;
  margin:     var(--lep-space-3) 0 var(--lep-space-4);
}
.lep-reassurance__item {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--lep-text-sm);
  color:       var(--lep-color-text-muted);
}

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

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

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

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

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

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

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

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

/* Agrément */
.lep-agrement-note {
  font-size:     var(--lep-text-sm);
  color:         var(--lep-color-text-muted);
  border-top:    1px solid var(--lep-color-border);
  padding-top:   var(--lep-space-3);
  margin-top:    var(--lep-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) {
  .lep-option-grid { grid-template-columns: 1fr 1fr; }
  .lep-progress-step__label { display: none; }
  .lep-canvas__main { padding: var(--lep-space-3) var(--lep-space-3); }
  .lep-module-section { padding: var(--lep-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('../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('../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('../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('../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('../fonts/Archivo-Bold.woff2') format('woff2');
}

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

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

/* ── Levier P6 — Réglementation ────────────────────────────────────────── */
.lep-legal-lever {
  margin-top:  var(--lep-space-4);
  padding:     var(--lep-space-3) var(--lep-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(--lep-color-primary-light);
  border-left: 4px solid var(--lep-color-primary);
  border-radius: var(--lep-radius-md);
  font-size:   var(--lep-text-sm);
  color:       var(--lep-color-text-body);
  display:     flex; gap: var(--lep-space-2); align-items: flex-start;
}
.lep-legal-lever__ic { color: var(--lep-color-primary); }

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

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

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

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

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

/* ── I1a — Passerelle E (aides renouvellement) ──────────────────────────── */
.lep-passerelle-e {
  border:        1px dashed var(--lep-color-border);
  border-radius: var(--lep-radius-sm);
  padding:       var(--lep-space-4);
  margin-top:    var(--lep-space-6);
  background:    var(--lep-color-surface-alt);
}
.lep-passerelle-e__title {
  display:     block;
  font-weight: 600;
  font-size:   var(--lep-text-sm);
  color:       var(--lep-color-text-headline);
  margin-bottom: .4rem;
}
.lep-passerelle-e__text {
  font-size:  var(--lep-text-sm);
  color:      var(--lep-color-text-muted);
  margin:     0 0 var(--lep-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) ───────────────────────────────────── */
.lep-form-group {
  display:       flex;
  flex-direction: column;
  gap:           .3rem;
  margin-bottom: var(--lep-space-4);
}
.lep-form-label {
  font-size:   var(--lep-text-sm);
  font-weight: 600;
  color:       var(--lep-color-text-headline);
}
.lep-form-input,
.lep-form-select {
  width:         100%;
  background:    var(--lep-color-surface);
  border:        1.5px solid var(--lep-color-border);
  border-radius: var(--lep-radius-sm);
  padding:       .55rem .75rem;
  font-size:     var(--lep-text-sm);
  color:         var(--lep-color-text-body);
  transition:    border-color var(--lep-duration);
}
.lep-form-input:focus,
.lep-form-select:focus {
  border-color: var(--lep-color-primary);
  outline:      none;
}
.lep-form-hint {
  font-size:  var(--lep-text-sm);
  color:      var(--lep-color-text-muted);
  margin:     0;
}
.lep-form-row {
  display:   grid;
  grid-template-columns: 1fr 1fr;
  gap:       var(--lep-space-4);
}
.lep-input-addon {
  display:  flex;
  align-items: stretch;
}
.lep-input-addon .lep-form-input {
  border-right:        none;
  border-radius:       var(--lep-radius-sm) 0 0 var(--lep-radius-sm);
  flex:                1;
}
.lep-input-addon__unit {
  background:    var(--lep-color-surface-alt);
  border:        1.5px solid var(--lep-color-border);
  border-left:   none;
  border-radius: 0 var(--lep-radius-sm) var(--lep-radius-sm) 0;
  padding:       0 .65rem;
  font-size:     var(--lep-text-sm);
  color:         var(--lep-color-text-muted);
  display:       flex;
  align-items:   center;
  white-space:   nowrap;
}
.lep-radio-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--lep-space-3);
  margin-top: .25rem;
}
.lep-radio-item {
  display:     flex;
  align-items: center;
  gap:         .4rem;
  font-size:   var(--lep-text-sm);
  color:       var(--lep-color-text-body);
  cursor:      pointer;
}
.lep-radio-item input[type="radio"] { accent-color: var(--lep-color-primary); }

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

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

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

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

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

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

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

/* ── I1b — Responsive compléments ───────────────────────────────────── */
@media (max-width: 600px) {
  .lep-form-row       { grid-template-columns: 1fr; }
  .lep-stats-grid     { grid-template-columns: 1fr 1fr; }
  .lep-aide-card__header { flex-wrap: wrap; }
  .lep-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 .lep-mission {
  max-width:     var(--lep-container);
  margin:        1.25rem auto .25rem;
  padding:       1rem 1.25rem;
  background:    var(--lep-color-primary-light);
  border-left:   4px solid var(--lep-color-primary);
  border-radius: var(--lep-radius-md);
  font-size:     var(--lep-text-base);
  color:         var(--lep-color-text-body);
}
#vhu-root .lep-mission__lead {
  font-weight: 700;
  color:       var(--lep-color-text-headline);
}

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

/* I1FO-02 — infobulle accessible (bouton ? + role=tooltip, :hover/:focus) */
#vhu-root .lep-help { position: relative; display: inline-block; margin-left: .3rem; }
#vhu-root .lep-help__btn {
  width: 18px; height: 18px;
  border: 1px solid var(--lep-color-primary);
  border-radius: var(--lep-radius-full);
  background: var(--lep-color-surface);
  color: var(--lep-color-primary);
  font-size: var(--lep-text-xs); font-weight: 700; line-height: 1;
  cursor: help; padding: 0;
}
#vhu-root .lep-help__btn:focus-visible { outline: 2px solid var(--lep-color-primary); outline-offset: 2px; }
#vhu-root .lep-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(--lep-color-text-headline); color: #fff;
  border-radius: var(--lep-radius-sm);
  font-size: var(--lep-text-sm); font-weight: 400; line-height: 1.45;
  box-shadow: var(--lep-shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--lep-duration) ease;
}
#vhu-root .lep-help__btn:hover + .lep-help__tip,
#vhu-root .lep-help__btn:focus + .lep-help__tip,
#vhu-root .lep-help__btn:focus-visible + .lep-help__tip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  #vhu-root .lep-help__tip { transition: none; }
}
#vhu-root .lep-help-row {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin-top: .75rem; font-size: var(--lep-text-sm); color: var(--lep-color-text-muted);
}
#vhu-root .lep-help-inline { display: inline-flex; align-items: center; }

/* I1FO-05 — lien de preuve + badges législation */
#vhu-root .lep-proof {
  margin-left: .35rem;
  font-size: var(--lep-text-sm);
  color: var(--lep-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#vhu-root .lep-proof:focus-visible { outline: 2px solid var(--lep-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 .lep-proof-fresh {
  display: inline-block; margin-left: .3rem; vertical-align: middle;
  line-height: 0; cursor: help;
}
#vhu-root .lep-proof-fresh__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lep-color-success, #2e7d32); opacity: .55;
  transition: opacity .15s ease, transform .15s ease;
}
#vhu-root .lep-proof-fresh:hover .lep-proof-fresh__dot,
#vhu-root .lep-proof-fresh:focus-visible .lep-proof-fresh__dot {
  opacity: 1; transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
  #vhu-root .lep-proof-fresh__dot { transition: none; }
}
#vhu-root .lep-proof__ok,
#vhu-root .lep-proof__todo {
  display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
  border-radius: var(--lep-radius-sm);
  font-size: var(--lep-text-xs); font-weight: 700; letter-spacing: .03em;
  vertical-align: middle; white-space: nowrap;
}
#vhu-root .lep-proof__ok   { background: var(--lep-color-success-bg); color: var(--lep-color-success); }
#vhu-root .lep-proof__todo { background: var(--lep-color-warning-bg); color: var(--lep-color-warning); }
#vhu-root .lep-proof-section {
  max-width: var(--lep-container); margin: 1.5rem auto;
  padding: 1.1rem 1.25rem;
  background: var(--lep-color-surface);
  border: 1px solid var(--lep-color-border);
  border-radius: var(--lep-radius-md);
}
#vhu-root .lep-proof-section__title {
  margin: 0 0 .6rem; font-size: var(--lep-text-lg); color: var(--lep-color-text-headline);
}
#vhu-root .lep-proof-list { margin: 0; padding-left: 1.1rem; }
#vhu-root .lep-proof-item { margin: .45rem 0; font-size: var(--lep-text-sm); color: var(--lep-color-text-body); }
#vhu-root .lep-legal-badge {
  display: inline-block; padding: .15rem .5rem;
  background: var(--lep-color-primary-light); color: var(--lep-color-primary-dark);
  border-radius: var(--lep-radius-sm); font-size: var(--lep-text-xs); font-weight: 600;
}
#vhu-root .lep-legal-badge--link { text-decoration: none; }
#vhu-root .lep-legal-badge--link:hover { text-decoration: underline; }

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

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

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

/* I1FO-06 — méta d'en-tête de la page-outil (toggle showAuthor) */
#vhu-root .lep-header-meta {
  margin-left: auto;
  margin-right: 1rem;
  font-size: var(--lep-text-sm);
  color: var(--lep-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 */
.lep-canvas__header {
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             .75rem;
}
#vhu-root .lep-canvas__header .lep-cta-row { margin-top: 0; }
#vhu-root .lep-canvas__header .lep-cta-call {
  border-color: rgba(255,255,255,0.7);
  color:        #fff;
}
#vhu-root .lep-canvas__header .lep-cta-call:hover { background: rgba(255,255,255,0.12); }
#vhu-root .lep-canvas__header .lep-header-meta { color: rgba(255,255,255,0.85); }

/* I1FO-02 — lexique jargon visible (15 def_*, tooltips réellement câblés) */
#vhu-root .lep-lexique {
  max-width:     var(--lep-container);
  margin:        1.5rem auto 0;
  padding:       1.1rem 1.25rem;
  background:    var(--lep-color-surface);
  border:        1px solid var(--lep-color-border);
  border-radius: var(--lep-radius-md);
}
#vhu-root .lep-lexique__title {
  margin:    0 0 .6rem;
  font-size: var(--lep-text-lg);
  color:     var(--lep-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 .lep-lexique__title,
#vhu-root .lep-proof-section__title,
#vhu-root .lep-links__title,
#vhu-root .lep-faq__title,
#vhu-root .lep-aides-gateway__title {
  font-size:   var(--lep-text-lg);
  font-weight: 700;
  font-family: var(--lep-font-body);
  color:       var(--lep-color-text-headline);
  margin:      0 0 .6rem;
}
#vhu-root .lep-lexique__list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        .4rem .9rem;
  margin:     0;
  padding:    0;
  list-style: none;
}
#vhu-root .lep-lexique__item {
  display:     inline-flex;
  align-items: center;
  font-size:   var(--lep-text-sm);
  color:       var(--lep-color-text-body);
}
#vhu-root .lep-lexique__term { font-weight: 600; color: var(--lep-color-text-headline); }

/* I1FO-04 — panneau de rappel replié (P5, jamais de tel: forcé) */
#vhu-root .lep-rappel-panel {
  margin:        .6rem 0 0;
  padding:       .85rem 1.1rem;
  background:    var(--lep-color-primary-light);
  border:        1px solid var(--lep-color-border);
  border-radius: var(--lep-radius-md);
}
#vhu-root .lep-rappel-panel__title {
  margin:    0 0 .5rem;
  font-size: var(--lep-text-sm);
  color:     var(--lep-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). */
.lep-embed .lep-canvas__back,
.lep-embed .lep-topbar__back,
.lep-embed .lep-masthead__retour { display: none !important; }