/* ============================================================================
   Homunity Design System
   Surcouche Bootstrap 5.3 — la configuration (couleurs, radius, typo, etc.)
   passe par les variables CSS natives de Bootstrap (--bs-*). Tout ce qui
   est propre au design Homunity et qui ne tient pas dans la config Bootstrap
   est défini ensuite en .h-* (composants custom).
   Pas de préprocesseur : CSS pur.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. Polices — PP Neue Montreal (corps) et Reckless Neue (titres).
   Fichiers .woff2 sous licence à déposer dans /fonts/. Fallback propre tant
   qu'ils sont absents (Inter/serif système).
   ---------------------------------------------------------------------------- */

@font-face {
    font-family: 'PP Neue Montreal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/pp-neue-montreal-400.woff2') format('woff2');
}

@font-face {
    font-family: 'PP Neue Montreal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/pp-neue-montreal-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Reckless Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/reckless-neue-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Reckless Neue';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/reckless-neue-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Reckless Neue';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/reckless-neue-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Reckless Neue';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/reckless-neue-700.woff2') format('woff2');
}

/* Titres en Reckless Neue (serif display) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

/* Chasses PP Neue Montreal : 400 (base) et 500 (bold). Pas de 700 → on coupe la
   synthèse de gras et on ramène les utilitaires/balises "bold" à 500. */
body {
    font-synthesis-weight: none;
}

b, strong, .fw-bold, .fw-semibold {
    font-weight: 500;
}

/* ----------------------------------------------------------------------------
   1. Configuration Bootstrap — variables natives surchargées
   ---------------------------------------------------------------------------- */

:root {
    /* Brand */
    --bs-primary:                 #2D37D6;
    --bs-primary-rgb:             45, 55, 214;
    --bs-primary-bg-subtle:       #E8EEFF;
    --bs-primary-border-subtle:   #CECFD0;
    --bs-primary-text-emphasis:   #081116;

    /* Statuts */
    --bs-success:                 #0E5A38;
    --bs-success-rgb:             14, 90, 56;
    --bs-success-bg-subtle:       #E7F0EA;
    --bs-danger:                  #B96F64;
    --bs-danger-rgb:              185, 111, 100;
    --bs-danger-bg-subtle:        #F4E5E2;
    --bs-warning:                 #F79009;
    --bs-warning-rgb:             247, 144, 9;
    --bs-warning-bg-subtle:       #FCEAD0;

    /* Accent — mises en avant financières (montants, rentabilité) */
    --bs-accent:                  #BE9054;

    /* Progression — piste et remplissage des barres de parcours */
    --bs-progress-track:          #E6E9F7;
    --bs-progress-fill:           #9BC0A5;

    /* Texte & fonds */
    --bs-body-color:              #4C4C4C;
    --bs-body-color-rgb:          76, 76, 76;
    --bs-body-bg:                 #F5F2ED;
    --bs-body-bg-rgb:             245, 242, 237;
    --bs-secondary-color:         #4C4C4C;
    --bs-tertiary-color:          #7B7B7B;
    --bs-emphasis-color:          #212121;

    /* Bordures */
    --bs-border-color:            #E5DED6;
    --bs-border-color-translucent: rgba(33, 33, 33, 0.12);

    /* Radius */
    --bs-border-radius:           8px;
    --bs-border-radius-sm:        4px;
    --bs-border-radius-lg:        12px;
    --bs-border-radius-xl:        16px;
    --bs-border-radius-pill:      999px;

    /* Typographie */
    --bs-body-font-family:        'PP Neue Montreal', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size:          1rem;
    --bs-body-font-weight:        400;
    --bs-body-line-height:        1.5;

    /* Liens */
    --bs-link-color:              #2D37D6;
    --bs-link-color-rgb:          45, 55, 214;
    --bs-link-hover-color:        #477DF7;
    --bs-link-hover-color-rgb:    71, 125, 247;

    /* Focus ring */
    --bs-focus-ring-color:        rgba(45, 55, 214, 0.25);
    --bs-focus-ring-width:        3px;

    /* États valid/invalid — tons doux Figma (input-border/text-error|success) */
    --bs-form-invalid-color:        #7D463D;
    --bs-form-invalid-border-color: #E2C2BC;
    --bs-form-valid-color:          #29543A;
    --bs-form-valid-border-color:   #C8DBCE;
}

/* ----------------------------------------------------------------------------
   2. Buttons — surcharge via --bs-btn-*
   ---------------------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius:       var(--bs-border-radius-pill);
    --bs-btn-font-weight:         600;
    --bs-btn-line-height:         1.2;
    --bs-btn-padding-y:           0.625rem;
    --bs-btn-padding-x:           1.5rem;
    --bs-btn-font-size:           0.875rem;
}

.btn-lg {
    --bs-btn-padding-y:           0.875rem;
    --bs-btn-padding-x:           1.75rem;
    --bs-btn-font-size:           1rem;
    --bs-btn-border-radius:       var(--bs-border-radius-pill);
}

.btn-sm {
    --bs-btn-padding-y:           0.375rem;
    --bs-btn-padding-x:           1rem;
    --bs-btn-font-size:           0.875rem;
    --bs-btn-border-radius:       var(--bs-border-radius-pill);
}

.btn-primary {
    --bs-btn-bg:                  var(--bs-primary);
    --bs-btn-border-color:        var(--bs-primary);
    --bs-btn-color:               #FFFFFF;
    --bs-btn-hover-bg:            #477DF7;
    --bs-btn-hover-border-color:  #477DF7;
    --bs-btn-hover-color:         #FFFFFF;
    --bs-btn-active-bg:           var(--bs-primary-text-emphasis);
    --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-color:        #FFFFFF;
    --bs-btn-disabled-bg:         #E6E8EA;
    --bs-btn-disabled-border-color: #E6E8EA;
    --bs-btn-disabled-color:      #4C4C4C;
    /* Palette désactivée explicite affichée à pleine opacité (pas le fondu 0.65 de Bootstrap). */
    --bs-btn-disabled-opacity:    1;
}

/* Secondaire — blanc, bordure chaude, texte foncé (Figma button-secondary). */
.btn-secondary {
    --bs-btn-bg:                  #FFFFFF;
    --bs-btn-border-color:        #E2DDD5;
    --bs-btn-color:               #212121;
    --bs-btn-hover-bg:            #EAEAEA;
    --bs-btn-hover-border-color:  #E2DDD5;
    --bs-btn-hover-color:         #212121;
    --bs-btn-active-bg:           #E8EEFF;
    --bs-btn-active-border-color: #E2DDD5;
    --bs-btn-active-color:        #212121;
    --bs-btn-disabled-bg:         #FFFFFF;
    --bs-btn-disabled-border-color: #CECFD0;
    --bs-btn-disabled-color:      #4C4C4C;
    --bs-btn-disabled-opacity:    1;
}

/* Destructif (Figma button-error). */
.btn-danger {
    --bs-btn-bg:                  #B96F64;
    --bs-btn-border-color:        #B96F64;
    --bs-btn-color:               #FFFFFF;
    --bs-btn-hover-bg:            #F04438;
    --bs-btn-hover-border-color:  #F04438;
    --bs-btn-hover-color:         #FFFFFF;
    --bs-btn-active-bg:           #7A1515;
    --bs-btn-active-border-color: #7A1515;
    --bs-btn-active-color:        #FFFFFF;
    --bs-btn-disabled-bg:         #FFF2F1;
    --bs-btn-disabled-border-color: #FFF2F1;
    --bs-btn-disabled-color:      #B7685F;
    --bs-btn-disabled-opacity:    1;
}

/* Validation (Figma button-success). */
.btn-success {
    --bs-btn-bg:                  #0E5A38;
    --bs-btn-border-color:        #0E5A38;
    --bs-btn-color:               #FFFFFF;
    --bs-btn-hover-bg:            #234A34;
    --bs-btn-hover-border-color:  #234A34;
    --bs-btn-hover-color:         #FFFFFF;
    --bs-btn-active-bg:           #183726;
    --bs-btn-active-border-color: #183726;
    --bs-btn-active-color:        #FFFFFF;
}

/* Alerte (Figma button-warning). */
.btn-warning {
    --bs-btn-bg:                  #D27D00;
    --bs-btn-border-color:        #D27D00;
    --bs-btn-color:               #FFFFFF;
    --bs-btn-hover-bg:            #F79009;
    --bs-btn-hover-border-color:  #F79009;
    --bs-btn-hover-color:         #FFFFFF;
    --bs-btn-active-bg:           #7A4800;
    --bs-btn-active-border-color: #7A4800;
    --bs-btn-active-color:        #FFFFFF;
}

.btn-outline-primary {
    --bs-btn-color:               var(--bs-primary);
    --bs-btn-border-color:        var(--bs-primary);
    --bs-btn-bg:                  transparent;
    --bs-btn-hover-bg:            var(--bs-primary-bg-subtle);
    --bs-btn-hover-border-color:  var(--bs-primary);
    --bs-btn-hover-color:         var(--bs-primary);
    --bs-btn-active-bg:           var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color:        #FFFFFF;
    --bs-btn-disabled-color:      var(--bs-primary-border-subtle);
    --bs-btn-disabled-border-color: var(--bs-primary-border-subtle);
    --bs-btn-disabled-bg:         transparent;
    --bs-btn-disabled-opacity:    1;
}

.btn-link {
    --bs-btn-color:               var(--bs-link-color);
    --bs-btn-hover-color:         var(--bs-link-hover-color);
    --bs-btn-active-color:        var(--bs-primary-text-emphasis);
    --bs-btn-disabled-color:      var(--bs-primary-border-subtle);
    --bs-btn-disabled-opacity:    1;
    --bs-btn-font-weight:         600;
}

/* ----------------------------------------------------------------------------
   3. Forms — variables Bootstrap où elles existent, sélecteurs sinon
   ---------------------------------------------------------------------------- */

.form-control,
.form-select {
    --bs-border-color:  var(--bs-primary-border-subtle);
    color:              var(--bs-emphasis-color);
    background-color:   #FFFFFF;
    border-radius:      var(--bs-border-radius-lg);
    border-width: 1px;
    padding: 0.875rem 1rem;
    font-weight: 500;
}

/* Placeholder en gris clair (tertiary) pour le distinguer de la valeur saisie :
   Bootstrap colore le placeholder avec --bs-secondary-color, identique à --bs-body-color (#4C4C4C). */
.form-control::placeholder {
    color: var(--bs-tertiary-color);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF;
    border-color: var(--bs-primary);
    border-width: 1.5px;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Hover — bordure assombrie (neutral/40). Bootstrap ne fournit pas de variable hover pour .form-control. */
.form-control:hover:not(:disabled):not(:focus):not(.is-invalid):not(.is-valid),
.form-select:hover:not(:disabled):not(:focus):not(.is-invalid):not(.is-valid) {
    border-color: #9CA0A2;
}

.form-control:disabled {
    background-color: #E6E8EA;
    color: var(--bs-tertiary-color);
}

/* États de validation — fond teinté en plus de la bordure (Figma input-bg-error/success). */
.form-control.is-invalid,
.form-select.is-invalid {
    background-color: #F4E5E2;
}

.form-control.is-valid,
.form-select.is-valid {
    background-color: #E7F0EA;
}

/* Floating labels — pattern utilisé dans les maquettes auth */
.form-floating > .form-control,
.form-floating > .form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 1rem;
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.form-floating > label {
    padding: 1rem;
    color: var(--bs-tertiary-color);
    font-weight: 400;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--bs-secondary-color);
    transform: scale(0.78) translateY(-0.5rem) translateX(0.15rem);
    opacity: 1;
}

/* Select dont la 1re option (value="") sert de placeholder : tant qu'aucune valeur
   n'est choisie et hors focus, le label reste centré (comme un placeholder d'input),
   au lieu du flottement permanent natif des selects. Au focus ou après sélection,
   il remonte normalement (règle ci-dessus). */
.form-floating:has(.form-select option[value=""]:checked):not(:focus-within) > .form-select {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.form-floating:has(.form-select option[value=""]:checked):not(:focus-within) > label {
    color: var(--bs-tertiary-color);
    transform: none;
}

/* État invalide pour form-floating */
.form-floating > .form-control.is-invalid {
    border-color: var(--bs-danger);
}

.form-floating > .form-control.is-invalid:focus ~ label,
.form-floating > .form-control.is-invalid:not(:placeholder-shown) ~ label {
    color: var(--bs-danger);
}

/* État valide pour form-floating — symétrique de is-invalid */
.form-floating > .form-control.is-valid {
    border-color: var(--bs-success);
}

.form-floating > .form-control.is-valid:focus ~ label,
.form-floating > .form-control.is-valid:not(:placeholder-shown) ~ label {
    color: var(--bs-success);
}

/* Recertification — champ à actualiser (vide en base), posé sur l'unité [data-validate] par
   homunity.kyc.initRecertifyHighlight. Teinte d'attention (ambre/doré), volontairement distincte
   du rouge d'erreur (is-invalid) : c'est une invitation à compléter, pas une erreur de saisie.
   Neutralisé dès qu'une vraie erreur de validation apparaît dans l'unité (:has(.is-invalid)) :
   le rouge d'erreur reprend alors la main sur le champ ET sur le message. */
.h-kyc-to-complete:not(:has(.is-invalid)) .form-control,
.h-kyc-to-complete:not(:has(.is-invalid)) .form-select {
    background-color: #FBF3E2;
    border-color: #D9BE8A;
    animation: h-kyc-glow 2s ease-in-out infinite;
}

/* Léger effet de « brillance » pulsée (glow ambre) pour attirer l'œil sans agressivité.
   Désactivé au focus (on laisse l'anneau de focus natif du champ) et si l'utilisateur préfère
   les animations réduites (accessibilité). Comme les autres règles, il s'éteint dès qu'une
   erreur de validation apparaît (sélecteur gaté par :not(:has(.is-invalid))). */
@keyframes h-kyc-glow {
    0%, 100% { box-shadow: 0 0 0.15rem 0 rgba(217, 190, 138, 0.25); }
    50%      { box-shadow: 0 0 0.6rem 0.08rem rgba(217, 190, 138, 0.75); }
}

.h-kyc-to-complete:not(:has(.is-invalid)) .form-control:focus,
.h-kyc-to-complete:not(:has(.is-invalid)) .form-select:focus {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .h-kyc-to-complete:not(:has(.is-invalid)) .form-control,
    .h-kyc-to-complete:not(:has(.is-invalid)) .form-select {
        animation: none;
    }
}

.h-kyc-to-complete:not(:has(.is-invalid)) .form-floating > .form-control,
.h-kyc-to-complete:not(:has(.is-invalid)) .form-floating > .form-select {
    border-color: #D9BE8A;
}

.h-kyc-to-complete:not(:has(.is-invalid)) .form-floating > .form-control:focus ~ label,
.h-kyc-to-complete:not(:has(.is-invalid)) .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #A6812F;
}

/* Message d'invite (« Vous devez renseigner… ») révélé directement par initRecertifyHighlight via la
   classe h-kyc-hint (et NON .d-block, qui déclencherait la re-validation rouge de homunity.validate).
   Tant qu'aucune erreur n'est signalée : affiché en ambre ; dès qu'une erreur apparaît, cette règle est
   désactivée par :has(.is-invalid) et le rouge natif de .invalid-feedback.d-block reprend la main. */
.h-kyc-to-complete:not(:has(.is-invalid)) .invalid-feedback.h-kyc-hint {
    display: block;
    color: #A6812F;
}

.form-check-input {
    --bs-form-check-bg:           #FFFFFF;
    border-color: var(--bs-primary-border-subtle);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Tailles de form-switch. Le switch est dimensionné en em — modifier la
   font-size du wrapper le redimensionne proportionnellement (track + thumb). */
.form-switch.h-switch-sm { font-size: 0.75rem; }
.form-switch.h-switch-lg { font-size: 1.5rem; }

/* ============================================================================
   COMPOSANTS HOMUNITY — non couverts par la config Bootstrap.
   Préfixe .h-*, consomment les variables --bs-* en priorité.
   ============================================================================ */

/* Séparateur "ou" horizontal avec libellé centré */
.h-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.h-divider::before,
.h-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

/* Bouton SSO — fond blanc, bordure subtile, libellé en poids normal */
.h-btn-sso {
    --bs-btn-font-weight:         400;
    --bs-btn-bg:                  #FFFFFF;
    --bs-btn-border-color:        var(--bs-border-color);
    --bs-btn-color:               var(--bs-body-color);
    --bs-btn-hover-bg:            var(--bs-primary-bg-subtle);
    --bs-btn-hover-border-color:  var(--bs-border-color);
    --bs-btn-hover-color:         var(--bs-body-color);
    --bs-btn-active-bg:           var(--bs-primary-bg-subtle);
    --bs-btn-active-color:        var(--bs-body-color);
}

/* ----------------------------------------------------------------------------
   Layout compte/auth — carte centrée 2 colonnes (formulaire + visuel immeuble).
   Réf. Figma : ParcoursKYC « Mon compte » (desktop = carte blanche arrondie,
   header logo+×, formulaire à gauche, photo à droite ; mobile = 1 colonne).
   ---------------------------------------------------------------------------- */
/* Page plein écran : header global en haut + corps split (formulaire | image). */
.h-auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
}

.h-auth-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* Colonne formulaire (~50%) — fond beige clair, contenu centré verticalement, scroll interne. */
.h-auth-form-col {
    flex: 1 1 50.5%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 2.5rem;
    overflow-y: auto;
}

/* Colonne visuelle (~50%) — photo en cover, encartée ~20px (haut/bas/droite), masquée sous lg. */
.h-auth-visual {
    flex: 1 1 49.5%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
}

@media (min-width: 992px) {
    .h-auth-visual {
        display: block;
        margin: 1.25rem 1.25rem 1.25rem 0;
        border-radius: var(--bs-border-radius-lg);
    }
    /* padding-bas majoré : remonte le bloc vers le centre optique du viewport (compense le header). */
    .h-auth-form-col { padding: 3rem 3rem 3.5rem; }
    /* Titre pleine taille sur desktop (défaut Bootstrap 2.5rem). */
    .h-auth-form h1 { font-size: 2.5rem; }
}

/* Mobile : centré horizontalement mais aligné en haut (pas de centrage vertical).
   Le centrage vertical est ajouté à partir de md (cf. media query ci-dessous). */
.h-auth-form {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/* Titre des écrans auth — plus grand sur mobile que le défaut Bootstrap (~27px),
   et espacement bas généreux (titre seul au-dessus du formulaire). */
.h-auth-form h1 {
    font-size: 2.125rem;
    margin-bottom: 3rem;
}

/* Titre suivi immédiatement d'un sous-titre : on rapproche le sous-titre. */
.h-auth-form h1:has(+ p) {
    margin-bottom: 1rem;
}

/* À partir de la tablette (md), on recentre le bloc sur les deux axes et on
   ramène l'espacement bas du titre au standard desktop. Seul le mobile (< md)
   reste aligné en haut à gauche. */
@media (min-width: 768px) {
    .h-auth-form { margin: auto; }
    .h-auth-form h1 { margin-bottom: 2.5rem; }
}

/* Header auth — barre claire : logo foncé à gauche, action (×) à droite.
   Réf. Figma : Components/Header.png (fond blanc, wordmark noir). */
.h-auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    min-height: 64px;
}

/* ----------------------------------------------------------------------------
   Header de tunnel (KYC / souscription) — barre épurée fond blanc, logo à
   gauche, bouton icône rond à droite, barre de progression fine en pied.
   Réf. Figma : Components/Header.png.
   ---------------------------------------------------------------------------- */
.h-funnel-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-funnel-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.h-funnel-logo {
    display: block;
    width: 8rem;
    max-width: 40vw;
    flex: 0 0 auto;
}

.h-funnel-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Bouton icône rond — fermer (×) ou reprendre (→). Bordure neutre, hover navy. */
.h-btn-icon-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background-color: transparent;
    color: var(--bs-body-color);
    transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.h-btn-icon-round:hover {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.h-btn-icon-round:focus-visible {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Barre de progression fine en pied de header — remplissage via --h-funnel-progress. */
.h-funnel-progress {
    --h-funnel-progress: 0%;
    height: 4px;
    width: 100%;
    background-color: var(--bs-progress-track);
    overflow: hidden;
}

.h-funnel-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--h-funnel-progress);
    background-color: var(--bs-progress-fill);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    transition: width 300ms ease-in-out;
}

/* Astérisque rouge pour champ requis sur .form-label.required */
.form-label.required::after {
    content: " *";
    color: var(--bs-danger);
}

/* Toggle œil dans un input-group : bouton plat aligné au champ */
.h-password-toggle {
    background-color: transparent;
    border: 1px solid var(--bs-primary-border-subtle);
    border-left: 0;
    border-top-right-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
    color: var(--bs-secondary-color);
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
}

.h-password-toggle:hover {
    color: var(--bs-primary);
    background-color: transparent;
}

.h-password-toggle:focus {
    box-shadow: none;
    outline: none;
    color: var(--bs-primary);
}

/* Quand le champ est en focus, harmoniser la bordure du toggle */
.input-group:focus-within .h-password-toggle {
    border-color: var(--bs-primary);
}

/* Quand le champ est invalide (is-invalid sur .form-control), aligner la bordure */
.input-group:has(.form-control.is-invalid) .h-password-toggle {
    border-color: var(--bs-danger);
}

/* Icônes à l'intérieur d'un .form-floating — leading (gauche) et trailing (droite).
   Pattern : on ajoute .h-with-icon-start et/ou .h-with-icon-end sur le wrapper
   .form-floating, puis on insère un <span> ou un <button> avec la classe
   .h-input-icon-start / .h-input-icon-end. Le span est purement décoratif (non
   cliquable), le button est interactif (clear, dropdown, etc.). */
.form-floating.h-with-icon-start > .form-control,
.form-floating.h-with-icon-start > .form-select,
.form-floating.h-with-icon-start > label {
    padding-left: 3rem;
}

.form-floating.h-with-icon-end > .form-control,
.form-floating.h-with-icon-end > .form-select {
    padding-right: 3rem;
}

/* Quand le champ porte déjà une icône custom à droite, on retire l'icône de
   validation native de Bootstrap (background-image) pour éviter la superposition ;
   l'état d'erreur reste visible via la couleur de fond et le message. */
.form-floating.h-with-icon-end > .form-control.is-invalid,
.form-floating.h-with-icon-end > .form-control.is-valid,
.form-floating.h-with-icon-end > .form-select.is-invalid,
.form-floating.h-with-icon-end > .form-select.is-valid {
    background-image: none;
}

.h-input-icon-start,
.h-input-icon-end {
    position: absolute;
    top: 0;
    height: 100%;
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    z-index: 4;
}

.h-input-icon-start { left: 0; }
.h-input-icon-end   { right: 0; }

/* Icône statique (span) — n'intercepte pas le clic, l'input reste cliquable. */
span.h-input-icon-start,
span.h-input-icon-end {
    pointer-events: none;
}

/* Champ date natif : on masque l'icône calendrier native du navigateur — une icône
   custom .h-input-icon-end est déjà affichée. L'ouverture se fait au clic sur le champ
   (cf. homunity.kyc.initDatepickers → showPicker). */
.h-datepicker::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Icône interactive (button) — clear, toggle, dropdown trigger, etc. */
button.h-input-icon-start,
button.h-input-icon-end {
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 150ms ease-in-out;
}

button.h-input-icon-start:hover,
button.h-input-icon-end:hover,
button.h-input-icon-start:focus-visible,
button.h-input-icon-end:focus-visible {
    color: var(--bs-primary);
    outline: none;
}

/* Modal — radius généreux, bouton close discret, padding confortable */
.modal-content {
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-border-width: 0;
    --bs-modal-box-shadow: 0 12px 32px rgba(33, 33, 33, 0.12);
}

.modal-header {
    --bs-modal-header-padding: 1.5rem 1.5rem 0;
    --bs-modal-header-border-width: 0;
}

.modal-body {
    --bs-modal-padding: 1rem 1.5rem 1.5rem;
}

.modal-footer {
    --bs-modal-footer-border-width: 0;
    --bs-modal-footer-gap: 0.5rem;
    padding: 0 1.5rem 1.5rem;
}

/* Variante de modal à fond blanc (modal « Votre compte » de l'inscription). */
.h-modal-light .modal-content {
    --bs-modal-bg: #FFFFFF;
}

/* Option type (radio en card) — affichée dans la modal "Votre compte" */
.h-radio-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border: 1.5px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
    margin: 0;
    transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
}

.h-radio-card:hover {
    border-color: var(--bs-primary-border-subtle);
}

.h-radio-card:has(input:checked) {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

/* Variante « neutre » — la sélection ne colore que le bouton radio, la carte
   reste blanche (modal « Votre compte » de l'inscription). */
.h-radio-card-plain:has(input:checked) {
    border-color: var(--bs-border-color);
    background-color: #FFFFFF;
}

.h-radio-card .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

.h-radio-card .form-check-label {
    margin: 0;
    padding: 0;
    color: var(--bs-body-color);
    font-weight: 500;
    cursor: pointer;
}

/* Animation shake — feedback sur action requise (ex. CGU non cochée) */
@keyframes h-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

.h-shake {
    animation: h-shake 0.4s ease-in-out;
}

/* Liste de conseils avec bullet points navy (page check_email) */
.h-tip-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.h-tip-list > li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.h-tip-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bs-body-color);
}

/* ----------------------------------------------------------------------------
   Cards — patterns récurrents de l'app (hero card, task card avec progression).
   Voir Figma 00_00_00_Compte.jpg.
   ---------------------------------------------------------------------------- */

/* Hero card — CTA principal fond navy. */
.h-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--bs-primary);
    color: #FFFFFF;
    border-radius: var(--bs-border-radius-xl);
    padding: 1.25rem 1.5rem;
    overflow: hidden;
}

.h-hero-card h2,
.h-hero-card h3,
.h-hero-card p {
    color: inherit;
    margin: 0;
}

.h-hero-card p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Décoration : 3 barres verticales blanches (chart) à insérer dans la hero card. */
.h-hero-card-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
    height: 2.5rem;
}

.h-hero-card-chart > span {
    display: block;
    width: 0.375rem;
    background-color: #FFFFFF;
    border-radius: 999px;
}

.h-hero-card-chart > span:nth-child(1) { height: 30%; opacity: 0.35; }
.h-hero-card-chart > span:nth-child(2) { height: 70%; opacity: 0.65; }
.h-hero-card-chart > span:nth-child(3) { height: 100%; opacity: 1;    }

/* Task card — carte d'étape avec barre de progression en haut.
   Variables CSS personnalisables :
     --h-progress       (0–100%, défaut 100%) — largeur de la barre
     --h-progress-color (défaut var(--bs-success)) — couleur de la barre
   Le bandeau utilise un gradient avec un fade à l'extrémité pour matcher Figma. */
.h-task-card {
    --h-progress:       100%;
    --h-progress-color: var(--bs-success);
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #FFFFFF;
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem;
    overflow: hidden;
}

/* Fond de la barre — couleur cible à faible opacité, toute la largeur (visible
   sur la portion non remplie). */
.h-task-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--h-progress-color);
    opacity: 0.2;
}

/* Remplissage — couleur pleine, largeur = --h-progress, bordure franche. */
.h-task-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--h-progress);
    height: 3px;
    background-color: var(--h-progress-color);
}

.h-task-card-danger  { --h-progress-color: var(--bs-danger);  }
.h-task-card-warning { --h-progress-color: var(--bs-warning); }

.h-task-card-title {
    color: var(--bs-body-color);
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
}

.h-task-card-desc {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin: 0.125rem 0 0;
}

.h-task-card-chevron {
    flex-shrink: 0;
    color: var(--bs-tertiary-color);
    margin-left: auto;
}

/* Icon badge — pictogramme contenu dans un carré arrondi. */
.h-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.h-icon-badge-light {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

.h-icon-badge-circle {
    border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   Tunnel KYC — écran « Mes informations » (identité, coordonnées, fiscalité,
   situation). Réutilise le header de tunnel (.h-funnel-header / .h-funnel-progress),
   les champs du DS (.form-control / .form-select) et la card radio (.h-radio-card).
   N'ajoute que le spécifique : pastille compte, onglets soulignés, bascule Oui/Non.
   Réf. Figma : ParcoursKYC/MesInformations.
   ---------------------------------------------------------------------------- */

/* Barre de progression du KYC en doré (Figma MesInformations) — override local
   du token de remplissage, sans toucher la valeur globale (--bs-progress-fill). */
/* Barre de progression unique du tunnel KYC, logée dans le pied de la navbar :
   avancement global du dossier. Inset (alignée sur le contenu du header), pilule
   arrondie, piste lavande + remplissage doré. Réf. Figma ParcoursKYC. */
.h-kyc-progress {
    --h-progress: 0%;
    height: 5px;
    margin: 0 1.5rem 0.625rem;
    border-radius: 999px;
    background-color: #E7E9F8;
    overflow: hidden;
}
.h-kyc-progress::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--h-progress, 0%);
    background-color: #D9BE8A;
    border-radius: 999px;
    transition: width 300ms ease-in-out;
}

/* Pastille compte (avatar + chevron) à droite du header. Affichée par défaut
   (desktop + mobile « formulaire »), masquée sur mobile quand le menu est ouvert. */
.h-kyc-account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.625rem 0.25rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-tertiary-color);
}

/* Bouton « × » de fermeture du menu (header) — visible seulement sur mobile quand
   le menu de gauche est ouvert ; il replie le menu en posant l'ancre #form. */
.h-kyc-menu-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-tertiary-color);
    cursor: pointer;
}

.h-kyc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 500;
    flex: 0 0 auto;
}

/* Header — barre pleine largeur, contenu aligné sur la grille du layout. */
.h-kyc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
    padding: 0 1.5rem;
}

/* Layout — mobile : seul le formulaire (colonne centrée). Sidebar (navigation
   des étapes) et visuel apparaissent à partir de lg, en grille 3 colonnes. */
.h-kyc-layout {
    padding: 1.5rem;
}

.h-kyc-sidebar,
.h-kyc-visual {
    display: none;
}

.h-kyc-main {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

/* lg : navigation (gauche) + formulaire (centre), colonnes fixes centrées.
   Pas encore d'image — la largeur ne suffit pas à lui donner une place correcte. */
@media (min-width: 992px) {
    .h-kyc-header-inner {
        padding: 0 1.25rem;
    }

    .h-kyc-layout {
        --h-kyc-header: 5.5rem;
        display: grid;
        grid-template-columns: 21rem 33rem;
        justify-content: center;
        gap: 1.5rem;
        align-items: start;
        padding: 1.25rem;
    }

    .h-kyc-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .h-kyc-main {
        max-width: none;
        margin: 0;
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius-lg);
        padding: 2rem;
    }
}

/* xl : largeur suffisante pour ajouter la colonne visuelle. La grille s'étale
   sur toute la largeur ; gauche et centre restent fixes, seul le visuel s'élargit. */
@media (min-width: 1200px) {
    .h-kyc-layout {
        grid-template-columns: 21rem 33rem minmax(0, 1fr);
        justify-content: stretch;
    }

    /* Visuel droit — toujours à la hauteur de la fenêtre (et non du contenu),
       collé sous le header lors du défilement. */
    .h-kyc-visual {
        display: block;
        position: sticky;
        top: calc(var(--h-kyc-header) + 1.25rem);
        height: calc(100vh - var(--h-kyc-header) - 2.5rem);
        border-radius: var(--bs-border-radius-lg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* Mobile (< lg) : le menu de gauche pousse le formulaire vers la droite. Le layout
   devient un rail horizontal (header sticky au-dessus, donc toujours visible) ; le
   menu, masqué à gauche (margin-left négatif), glisse en poussant le formulaire hors
   champ à droite. Pas d'overlay ni de fond blanc : il s'affiche sur le fond de page. */
@media (max-width: 991.98px) {
    .h-kyc-layout {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    /* Par défaut le menu de gauche est affiché (on « arrive » dessus) et le formulaire
       est poussé hors champ à droite. La translation GPU du menu ET du formulaire se
       fait ensemble → animation composite, sans reflow. */
    .h-kyc-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex: 0 0 100%;
        margin-left: -100%;
        padding: 1.5rem;
        background-color: var(--bs-body-bg);
        transform: translateX(100%);
        transition: transform 0.25s ease;
        will-change: transform;
    }

    .h-kyc-main {
        flex: 0 0 100%;
        max-width: none;
        margin: 0;
        padding: 1.5rem;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        will-change: transform;
    }

    /* Ancre #form présente (html.kyc-collapsed) : menu replié, formulaire affiché. */
    html.kyc-collapsed .h-kyc-sidebar,
    html.kyc-collapsed .h-kyc-main {
        transform: translateX(0);
    }

    /* Header : pastille compte sur le menu ; × (ferme le formulaire → menu) sur le formulaire. */
    html.kyc-collapsed .h-kyc-menu-close {
        display: inline-flex;
    }

    html.kyc-collapsed .h-kyc-account {
        display: none;
    }
}

/* Cartes de navigation cliquables (hero + étapes) — sans soulignement. */
a.h-hero-card,
a.h-task-card {
    text-decoration: none;
}

/* Carte « Mes investissements » — titre/description en spans. */
.h-kyc-hero-title {
    display: block;
    font-weight: 500;
    color: #FFFFFF;
}

.h-kyc-hero-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Carte d'étape — bloc texte (titre + description). */
.h-task-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ----------------------------------------------------------------------------
   Menu gauche du KYC — calage pixel sur Figma MesInformations (couleurs et
   tailles mesurées sur la maquette desktop).
   ---------------------------------------------------------------------------- */

/* Hero « Mes investissements ». */
.h-kyc-sidebar .h-hero-card {
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: var(--bs-border-radius-xl);
}

/* KYC non validé : accès verrouillé — aplat primary (défaut) et non cliquable. */
.h-kyc-sidebar .h-hero-card.is-locked {
    cursor: default;
}

/* KYC validé : accès ouvert — dégradé bleu clair (haut-gauche) vers bleu marine (bas-droite). */
.h-kyc-sidebar .h-hero-card.is-unlocked {
    background-color: var(--bs-primary);
    background-image: linear-gradient(125deg, #9FC0F5 0%, #4E6BE8 42%, var(--bs-primary) 70%, #1A2061 100%);
}

.h-kyc-hero-graphic {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
}

.h-kyc-hero-title {
    font-size: 1.125rem;
    line-height: 1.25;
}

.h-kyc-hero-desc {
    line-height: 1.35;
}

/* Badge cadenas du hero — cercle blanc translucide (Figma), distinct des
   badges carrés bleus des cartes d'étapes. */
.h-kyc-sidebar .h-hero-card .h-icon-badge {
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.3);
}

/* Cartes d'étapes. */
.h-kyc-sidebar .h-task-card {
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: var(--bs-border-radius-xl);
    background-color: #FFFFFF;
}

/* Barre supérieure en deux tons (Figma). On n'utilise PAS le ::before/::after
   « progress » de .h-task-card (réservé à sa sémantique de progression) : on les
   neutralise et on dessine la barre via un élément dédié .h-kyc-step-bar. */
.h-kyc-sidebar .h-task-card::before,
.h-kyc-sidebar .h-task-card::after {
    display: none;
}

/* Piste lavande pleine largeur. left/right négatifs : la barre déborde des bords
   et c'est le border-radius de la carte (overflow: hidden) qui arrondit ses coins
   — elle épouse ainsi les coins arrondis au lieu de flotter en pastille inset. */
.h-kyc-step-bar {
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    height: 4px;
    background-color: #ECEDF3;
}

/* Remplissage corail = progression du bloc : largeur pilotée par --h-progress
   (0–100%, fourni par get_menu via le style inline de .h-kyc-step-bar). Coin
   gauche arrondi hérité du clip de la carte. */
.h-kyc-step-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--h-progress, 0%);
    height: 4px;
    background-color: var(--h-step-color, #D8A39B);
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Badge icône des cartes d'étapes — bleu clair, carré arrondi.
   (Restreint aux cartes pour ne pas toucher le cadenas du hero.) */
.h-kyc-sidebar .h-task-card .h-icon-badge {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: #BEDDF4;
    color: #4F7193;
}

.h-kyc-sidebar .h-task-card-title {
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-kyc-sidebar .h-task-card-desc {
    color: #6E7176;
    line-height: 1.35;
}

.h-kyc-sidebar .h-task-card-chevron {
    color: #9AA0A6;
}

/* Étape active — bordure lavande (Figma). */
.h-kyc-sidebar .h-task-card.is-active {
    border: 1.5px solid #A9ABE4;
}

/* Étapes à venir (inactives) — fond cassé, textes atténués (badge bleu conservé). */
.h-kyc-sidebar .h-task-card:not(.is-active) {
    background-color: #F8F7F5;
}

.h-kyc-sidebar .h-task-card:not(.is-active) .h-task-card-title {
    color: #757575;
}

.h-kyc-sidebar .h-task-card:not(.is-active) .h-task-card-desc {
    color: #B0B0B0;
}

.h-kyc-sidebar .h-task-card:not(.is-active) .h-task-card-chevron {
    color: #C2C2C0;
}

/* Titre « Mes informations » + icône info. */
.h-kyc-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 2.125rem;
    margin-bottom: 1.5rem;
}

.h-kyc-title svg {
    color: var(--bs-tertiary-color);
    flex: 0 0 auto;
}

/* Bouton de la bulle d'info du titre de bloc (icône « i », tooltip Bootstrap). */
.h-kyc-title-info {
    display: inline-flex;
    border: 0;
    padding: 0;
    background: none;
    color: var(--bs-tertiary-color);
}

/* Tooltip Bootstrap — bulle au bleu de la marque (la flèche suit le fond). */
.tooltip {
    --bs-tooltip-bg: var(--bs-primary);
    --bs-tooltip-color: #FFFFFF;
    --bs-tooltip-opacity: 1;
}

/* Onglets — soulignés, défilables horizontalement sur petit écran. */
.h-kyc-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 2rem;
    overflow-x: auto;
    /* Défilement horizontal uniquement : sans overflow-y explicite, overflow-x: auto fait calculer
       overflow-y à « auto » aussi, et le léger débord vertical (bordure 4px + margin-bottom -1px des
       onglets) rend la barre scrollable en vertical au toucher sur mobile. On le fige. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.h-kyc-tabs::-webkit-scrollbar {
    display: none;
}

.h-kyc-tab {
    flex: 0 0 auto;
    padding: 0 0.75rem 0.75rem;
    color: var(--bs-tertiary-color);
    text-decoration: none;
    border-bottom: 4px solid transparent;
    margin-bottom: -1px;
    transition: color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.h-kyc-tab:hover {
    color: var(--bs-body-color);
}

.h-kyc-tab.is-active {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    font-weight: 500;
}

/* Onglet à venir (ex. « Provenance ») — grisé et non cliquable. */
.h-kyc-tab.is-disabled {
    color: var(--bs-tertiary-color);
    opacity: 0.55;
    pointer-events: none;
}

/* Onglet déjà parcouru — coche verte à droite du libellé ; le libellé garde sa couleur normale. */
.h-kyc-tab.is-done {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.h-kyc-tab-check {
    color: var(--bs-success);
}

/* Liste de choix (objectifs, horizon…) — cartes radio/checkbox empilées sur fond blanc. */
.h-kyc-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.h-kyc-choices .h-radio-card {
    background-color: #FFFFFF;
}

/* Formulaire — champs empilés avec gouttière régulière. */
.h-kyc-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bloc conditionnel regroupant plusieurs groupes de questions : reproduit la
   gouttière du formulaire pour ses enfants (sinon ils se colleraient, le bloc
   n'étant pas lui-même une gouttière flex). */
.h-kyc-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Pagination des questions (« Mon expérience → Profil ») : une étape visible à la fois, glissement
   à la navigation. Le masquage n'est actif qu'une fois le pager initialisé (classe .h-kyc-pager-ready
   posée par homunity.kyc.initExperiencePager) : sans JS, toutes les étapes restent visibles. Chaque
   étape reproduit la gouttière du formulaire pour espacer question / conseil / bouton. */
.h-kyc-pager-ready .h-kyc-step {
    display: none;
}
.h-kyc-pager-ready .h-kyc-step.is-active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: h-kyc-step-in 0.3s ease;
}
@keyframes h-kyc-step-in {
    from {
        opacity: 0;
        transform: translateX(1.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .h-kyc-pager-ready .h-kyc-step.is-active {
        animation: none;
    }
}

/* Choix de civilité — 2 cards côte à côte (réutilise .h-radio-card). */
.h-kyc-gender {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Fond blanc des cartes de genre (par défaut .h-radio-card est transparente). */
.h-kyc-gender .h-radio-card {
    background-color: #FFFFFF;
}

/* Question fermée (US person, PPE). */
.h-kyc-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.h-kyc-question {
    float: none;
    width: auto;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem;
}

/* Question ouverte (« Mes objectifs », « Mes finances ») — titre de question
   au-dessus du champ. Spec Figma : PP Neue Montreal Medium 20px / 28px,
   espacement -2 %. */
.h-kyc-question-lg {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
    margin-bottom: 1rem;
}

/* Carte « Notre conseil pratique » — encart d'aide sous le champ (« Mes finances »). */
.h-kyc-advice {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.25rem 1.5rem;
}

.h-kyc-advice-title {
    display: block;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    margin-bottom: 0.75rem;
}

.h-kyc-advice p {
    font-size: 0.875rem;
    color: var(--bs-body-color);
    margin: 0;
}

/* Variante d'alerte de l'encart conseil — fond jaune pâle (« Mon expérience » :
   engagements financiers, qualification d'investisseur non averti). */
.h-kyc-advice-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

/* Cartes à cocher imbriquées dans un encart conseil (qualification non averti). */
.h-kyc-advice .h-radio-card {
    background-color: #FFFFFF;
    margin-top: 0.75rem;
}

/* Lien d'aide sous le titre d'une question (ex. « La réglementation MIF2 »). */
.h-kyc-question-link {
    display: inline-block;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Texte d'introduction d'un écran, sous le titre de question. */
.h-kyc-intro {
    margin: 0;
    color: var(--bs-body-color);
}

/* Note de renvoi (« * ») en bas de formulaire. */
.h-kyc-footnote {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* Carte de résultat du simulateur (« Capacité à supporter des pertes »). */
.h-kyc-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.5rem;
}

.h-kyc-result-label {
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

.h-kyc-result-amount {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.h-kyc-result-hint {
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* Page « Mon identification » : le formulaire occupe toute la hauteur visible
   (colonne flex) pour que l'iframe de vérification descende jusqu'en bas de la
   fenêtre. Sous lg le layout n'a pas de gouttière ; à partir de lg on retranche
   en plus sa marge verticale, ce qui cale la carte sur la colonne visuelle. */
.h-kyc-main-fill {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--h-kyc-header, 5.5rem));
}

@media (min-width: 992px) {
    .h-kyc-main-fill {
        min-height: calc(100dvh - var(--h-kyc-header) - 2.5rem);
    }
}

.h-kyc-main-fill .h-kyc-lemonway {
    flex: 1 1 auto;
}

/* Iframe Lemonway (« Mon identification ») — la vérification d'identité (Onfido)
   s'affiche dans une carte blanche pleine largeur. */
.h-kyc-lemonway {
    display: block;
    width: 100%;
    min-height: 560px;
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    overflow: hidden;
}

/* L'iframe d'onboarding est générée par le SDK Lemonway WebKit à l'intérieur du conteneur : elle le remplit. */
.h-kyc-lemonway > iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
}

/* État d'indisponibilité — même carte, message centré. */
.h-kyc-lemonway-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--bs-tertiary-color);
}

/* Liste à coches de la modale « Vérification d'identité requise ». */
.h-kyc-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}

.h-kyc-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--bs-emphasis-color);
}

.h-kyc-checklist svg {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--bs-emphasis-color);
}

/* Switch segmenté glissant Oui/Non (Figma) — un seul pill avec un thumb blanc
   qui coulisse sur l'option choisie. Non natif Bootstrap (.form-switch ne gère
   qu'un on/off sans libellés) : composant custom.
   Markup attendu :
     <div class="h-kyc-switch">
       <span class="h-kyc-switch-thumb"></span>
       <input type="radio" name="…" id="…-oui" value="1"><label for="…-oui">Oui</label>
       <input type="radio" name="…" id="…-non" value="0" checked><label for="…-non">Non</label>
     </div>
   Le thumb se place à gauche par défaut, à droite si le 2e radio est coché. */
.h-kyc-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border: 1px solid #DBD8D3;
    border-radius: var(--bs-border-radius-pill);
}

.h-kyc-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.h-kyc-switch label {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0.75rem 1rem;
    text-align: center;
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-emphasis-color);
    font-weight: 500;
    cursor: pointer;
}

/* Thumb blanc glissant, bordure lavande (option sélectionnée). */
.h-kyc-switch-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    border: 1.5px solid #A9ABE4;
    box-shadow: 0 1px 3px rgba(33, 33, 33, 0.08);
    transition: transform 200ms ease-in-out;
    z-index: 0;
}

/* 2e radio (Non) coché → thumb à droite. */
.h-kyc-switch:has(input:last-of-type:checked) .h-kyc-switch-thumb {
    transform: translateX(100%);
}

.h-kyc-switch:focus-within .h-kyc-switch-thumb {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Switch verrouillé (ex. « US Person » forcé à « Oui » quand la nationalité est américaine) :
   grisé et non modifiable. */
.h-kyc-switch.is-locked {
    opacity: 0.6;
}

.h-kyc-switch.is-locked label {
    pointer-events: none;
    cursor: not-allowed;
}

/* Bouton d'enregistrement — pleine largeur, espacé du formulaire. */
.h-kyc-form .btn {
    margin-top: 0.5rem;
}

/* Écran de bienvenue (recertification). */
.h-kyc-welcome {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ----------------------------------------------------------------------------
   Tableau de bord investisseur (« Portefeuille »). Header de barre supérieure,
   en-tête, bascule de segment, carrousel d'opérations, puis grille 2 colonnes
   (contenu + latérale) avec cartes. Réf. Figma Dashboard/crowdfunding.jpg.
   ---------------------------------------------------------------------------- */

/* Header — barre supérieure pleine largeur, collée en haut. */
.h-dash-topnav {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-dash-topnav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.h-dash-logo {
    display: block;
    width: 7.5rem;
    flex: 0 0 auto;
}

.h-dash-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.h-dash-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-left: 1rem;
}

.h-dash-nav-link {
    color: var(--bs-tertiary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 150ms ease-in-out;
}

.h-dash-nav-link:hover {
    color: var(--bs-emphasis-color);
}

.h-dash-nav-link.is-active {
    color: var(--bs-emphasis-color);
}

.h-dash-topnav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.h-dash-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-weight: 500;
    text-decoration: none;
}

.h-dash-balance svg {
    color: var(--bs-tertiary-color);
}

.h-dash-add-funds {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.h-dash-account {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-tertiary-color);
    text-decoration: none;
}

.h-dash-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 500;
    flex: 0 0 auto;
}

/* Conteneur de page — largeur maîtrisée et centrée. */
.h-dash-shell {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

.h-dash-hello {
    font-size: 2.25rem;
    margin: 0 0 0.25rem;
}

.h-dash-subtitle {
    color: var(--bs-tertiary-color);
    margin: 0;
}

.h-dash-subtitle strong {
    color: var(--bs-body-color);
}

/* Bascule de segment (type d'investissement). */
.h-dash-segment {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.h-dash-segment-item {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-body-color);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out;
}

.h-dash-segment-item:hover {
    border-color: var(--bs-primary-border-subtle);
}

.h-dash-segment-item.is-active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #FFFFFF;
}

/* Bloc « Vos opérations en cours » — titre + flèches + carrousel. */
.h-dash-block {
    margin-bottom: 2rem;
}

.h-dash-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.h-dash-block-title {
    font-size: 1.125rem;
    margin: 0;
}

.h-dash-carousel-nav {
    display: flex;
    gap: 0.5rem;
}

.h-dash-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    cursor: pointer;
    transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.h-dash-arrow:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.h-dash-ops {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.h-dash-ops::-webkit-scrollbar {
    display: none;
}

.h-dash-op-card {
    flex: 0 0 auto;
    width: 19rem;
    scroll-snap-align: start;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.h-dash-op-media {
    position: relative;
    height: 11rem;
    background-size: cover;
    background-position: center;
}

.h-dash-op-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--bs-border-radius);
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

.h-dash-op-body {
    padding: 1rem 1.25rem 1.25rem;
}

.h-dash-op-title {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}

.h-dash-op-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin: 0 0 1rem;
}

.h-dash-status-ok {
    color: var(--bs-success);
}

.h-dash-status-warning {
    color: var(--bs-warning);
}

.h-dash-op-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.h-dash-op-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

.h-dash-op-stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-tertiary-color);
}

.h-dash-op-stat-value {
    color: var(--bs-accent);
    font-weight: 500;
}

/* Grille principale — contenu (gauche) + latérale (droite). */
.h-dash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
    align-items: start;
}

.h-dash-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.h-dash-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Carte de base. */
.h-dash-card {
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-xl);
    padding: 1.5rem;
}

.h-dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.h-dash-card-title {
    font-size: 1.125rem;
    margin: 0;
}

.h-dash-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--bs-link-color);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.h-dash-link:hover {
    color: var(--bs-link-hover-color);
}

/* Carte « Vos intérêts courus ». */
.h-dash-interests {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
}

.h-dash-interests-content {
    flex: 1 1 auto;
    min-width: 0;
}

.h-dash-interests-amount {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 3.25rem;
    line-height: 1.1;
    color: var(--bs-accent);
    margin: 0.5rem 0 0.25rem;
}

.h-dash-interests-caption {
    color: var(--bs-tertiary-color);
    margin: 0 0 1.25rem;
}

.h-dash-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: rgba(190, 144, 84, 0.12);
    color: var(--bs-accent);
    font-weight: 500;
    font-size: 0.875rem;
}

.h-dash-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: rgba(190, 144, 84, 0.18);
}

.h-dash-interests-visual {
    flex: 0 0 38%;
    align-self: stretch;
    min-height: 11rem;
    border-radius: var(--bs-border-radius-lg);
    background-size: cover;
    background-position: center;
}

/* Carte « État de votre portefeuille actuel ». */
.h-dash-date-select {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-tertiary-color);
    font-size: 0.875rem;
    cursor: pointer;
}

.h-dash-total {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
    margin: 0;
}

.h-dash-total-caption {
    color: var(--bs-tertiary-color);
    margin: 0 0 1.25rem;
}

.h-dash-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.h-dash-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.h-dash-row-muted {
    background-color: var(--bs-body-bg);
}

.h-dash-row-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.h-dash-row-icon-accent {
    background-color: rgba(190, 144, 84, 0.14);
    color: var(--bs-accent);
}

.h-dash-row-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.h-dash-row-value {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-dash-row-label {
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-badge {
    border-radius: var(--bs-border-radius-pill);
    font-weight: 500;
    padding: 0.375rem 0.75rem;
}

.h-dash-row-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

/* Carte « Vos prochaines échéances » — histogramme CSS. */
.h-dash-chart-amount {
    text-align: right;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.375rem;
    color: var(--bs-emphasis-color);
    margin: 0;
}

.h-dash-chart-caption {
    text-align: right;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    margin: 0 0 1.25rem;
}

.h-dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 10rem;
    padding-bottom: 1.5rem;
}

.h-dash-chart-col {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.h-dash-bar {
    position: relative;
    width: 100%;
    max-width: 2.25rem;
    margin: 0 auto;
    min-height: 0.5rem;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.h-dash-bar-past {
    background-color: #C9C2B6;
}

.h-dash-bar-future {
    background-color: var(--bs-primary-bg-subtle);
}

.h-dash-bar-active {
    background-color: var(--bs-primary);
}

.h-dash-bar-dot {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.h-dash-bar-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bs-tertiary-color);
}

/* Carte « Suivi détaillé de vos prêts en cours ». */
.h-dash-loans {
    display: flex;
    flex-direction: column;
}

.h-dash-loan-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid var(--bs-border-color);
    text-decoration: none;
    color: inherit;
}

.h-dash-loan-row:first-child {
    border-top: 0;
}

.h-dash-loan-thumb {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--bs-border-radius);
    object-fit: cover;
    flex: 0 0 auto;
}

.h-dash-loan-name {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.h-dash-loan-title {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-dash-loan-target {
    font-size: 0.8125rem;
    color: var(--bs-accent);
}

.h-dash-loan-cell {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 0 0 auto;
    width: 8.5rem;
}

.h-dash-loan-strong {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-dash-loan-muted {
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-loan-chevron {
    color: var(--bs-tertiary-color);
    flex: 0 0 auto;
}

/* Latérale — carte d'alerte (action requise). */
.h-dash-alert {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger);
}

.h-dash-alert-head {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--bs-danger);
    margin-bottom: 0.625rem;
}

.h-dash-alert-head svg {
    flex: 0 0 auto;
}

.h-dash-alert-title {
    font-size: 1rem;
    color: var(--bs-danger);
    margin: 0;
}

.h-dash-alert-text {
    color: var(--bs-body-color);
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

.h-dash-alert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background-color: #FFFFFF;
}

/* Latérale — actualités des chantiers. */
.h-dash-news {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.h-dash-news-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.h-dash-news-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.h-dash-news-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    background-color: var(--bs-body-bg);
    color: var(--bs-tertiary-color);
}

.h-dash-news-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.h-dash-news-title {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--bs-emphasis-color);
}

.h-dash-news-desc {
    font-size: 0.8125rem;
    color: var(--bs-body-color);
}

.h-dash-news-when {
    font-size: 0.75rem;
    color: var(--bs-tertiary-color);
}

/* Latérale — cartes promotionnelles. */
.h-dash-promo {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.h-dash-promo-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.h-dash-promo-title {
    font-size: 1.0625rem;
    margin: 0;
}

.h-dash-promo-text {
    color: var(--bs-tertiary-color);
    font-size: 0.875rem;
    margin: 0;
}

.h-dash-promo .btn {
    margin-top: 0.5rem;
}

.h-dash-copy-link {
    align-self: flex-start;
    padding-left: 0;
    padding-right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.h-dash-promo-inline {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.h-dash-promo-inline-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Latérale — configuration du compte (anneau de progression). */
.h-dash-config {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
}

.h-dash-progress-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: conic-gradient(var(--bs-primary) calc(var(--h-dash-progress, 0) * 1%), var(--bs-progress-track) 0);
}

.h-dash-progress-ring::before {
    content: '';
    position: absolute;
    inset: 0.25rem;
    background-color: #FFFFFF;
    border-radius: 50%;
}

.h-dash-progress-label {
    position: relative;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bs-primary);
}

.h-dash-config-text {
    display: flex;
    flex-direction: column;
}

.h-dash-config-title {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-dash-config-desc {
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* Responsive — pliage de la grille et de la barre de navigation. */
@media (max-width: 991.98px) {
    .h-dash-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .h-dash-nav {
        display: none;
    }
    .h-dash-interests-visual {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .h-dash-add-funds span,
    .h-dash-balance span {
        display: none;
    }
    .h-dash-loan-cell {
        display: none;
    }
    .h-dash-hello {
        font-size: 1.75rem;
    }
}

/* ----------------------------------------------------------------------------
   Autocomplétion (adresse / ville) — dropdown de suggestions branché sur les
   endpoints internes /api/address/*. Couleurs alignées sur les tokens du DS.
   Classes .haddress-* (portées depuis l'ancien design, ré-thémées).
   ---------------------------------------------------------------------------- */
.haddress-autocomplete-wrapper {
    position: relative;
}

.haddress-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 12px 32px rgba(33, 33, 33, 0.12);
    overflow: hidden;
    z-index: 30;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}

.haddress-dropdown.haddress-dropdown-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.haddress-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.haddress-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 150ms ease, padding-left 150ms ease;
    color: var(--bs-body-color);
    font-size: 0.9375rem;
    line-height: 1.25;
}

.haddress-item:hover,
.haddress-item.haddress-item-active {
    background-color: var(--bs-primary-bg-subtle);
    padding-left: 1.125rem;
}

.haddress-item-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--bs-tertiary-color);
}

.haddress-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haddress-skeleton {
    padding: 0.5rem 0.875rem;
}

.haddress-skeleton-row {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #F3F1ED 0%, #E5DED6 50%, #F3F1ED 100%);
    background-size: 200% 100%;
    animation: haddressShimmer 1.2s infinite;
    margin: 10px 0;
}

.haddress-skeleton-row:nth-child(1) { width: 75%; }
.haddress-skeleton-row:nth-child(2) { width: 60%; }
.haddress-skeleton-row:nth-child(3) { width: 82%; }

@keyframes haddressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.haddress-empty {
    padding: 0.75rem 0.875rem;
    color: var(--bs-tertiary-color);
    font-size: 0.875rem;
    font-style: italic;
}

/* Coordonnées KYC : recherche d'adresse + champs détaillés révélés (sélection ou saisie manuelle). */
/* Situation KYC : cascade de selects dépendants (situation professionnelle). */
.h-kyc-address,
.h-kyc-address-fields,
.h-kyc-cascade {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Les niveaux suivants des cascades sont générés dans un conteneur dédié ([data-profession-extra] par
   homunity.profession.js ; [data-tree-extra] par homunity.tree_cascade.js — forme juridique, code NACE).
   display:contents promeut ces niveaux en enfants directs du flex pour qu'ils profitent de la gouttière
   (gap:1rem) ; le conteneur vide ne crée alors aucun espace fantôme. */
.h-kyc-cascade [data-profession-extra],
.h-kyc-cascade [data-tree-extra] {
    display: contents;
}

/* Téléphone international : la lib enveloppe l'input dans .iti (inline-block) ; on force la pleine largeur. */
.h-kyc-form .iti {
    display: block;
    width: 100%;
}

/* Multi-select à tags (homunity.multiselect.js) : enrichit un <select multiple>. Le select natif est
   masqué sans display:none (position absolue) pour rester validable (required -> valueMissing). */
.h-multiselect {
    position: relative;
}
.h-multiselect-native {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.h-multiselect-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.375rem 0.75rem;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: text;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.h-multiselect-control:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(45, 55, 214, 0.15);
}
.h-multiselect-control.is-invalid {
    border-color: var(--bs-form-invalid-border-color);
    background-color: #F4E5E2;
}
.h-multiselect-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.125rem 0.25rem 0.125rem 0.625rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis, var(--bs-primary));
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.875rem;
    line-height: 1.4;
}
.h-multiselect-tag-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h-multiselect-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.h-multiselect-tag-remove:hover {
    opacity: 1;
    background-color: rgba(33, 33, 33, 0.08);
}
.h-multiselect-search {
    flex: 1 1 6rem;
    min-width: 6rem;
    padding: 0.25rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.9375rem;
}
.h-multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 12px 32px rgba(33, 33, 33, 0.12);
    overflow: hidden;
    z-index: 30;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    pointer-events: none;
}
.h-multiselect-dropdown.h-multiselect-dropdown-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.h-multiselect-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 16rem;
    overflow-y: auto;
}
.h-multiselect-item {
    padding: 0.625rem 0.875rem;
    color: var(--bs-body-color);
    font-size: 0.9375rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 150ms ease, padding-left 150ms ease;
}
.h-multiselect-item:hover,
.h-multiselect-item.h-multiselect-item-active {
    background-color: var(--bs-primary-bg-subtle);
    padding-left: 1.125rem;
}
.h-multiselect-empty {
    padding: 0.75rem 0.875rem;
    color: var(--bs-tertiary-color);
    font-size: 0.9375rem;
}