/* ============================================================================
   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;
}

/* Champ numérique natif : on masque les boutons d'incrément du navigateur — ils se
   superposeraient à l'icône custom .h-input-icon-end et, Chrome ne les peignant qu'au
   survol/focus, leur apparition décalait visuellement le suffixe (€). */
.form-floating.h-with-icon-end > input[type="number"]::-webkit-outer-spin-button,
.form-floating.h-with-icon-end > input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-floating.h-with-icon-end > input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* 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;
}

/* Détection du remplissage automatique du navigateur : Chrome ne déclenche
   aucun évènement input à l'autofill, mais lance l'animation, que
   homunity.auth écoute (animationstart) pour réactiver le bouton submit. */
@keyframes h-autofill-start {
    from { opacity: 1; }
    to   { opacity: 1; }
}

form[data-submit-gate] input:-webkit-autofill {
    animation: h-autofill-start 1ms;
}

/* 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-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-form-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-form-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-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. Coquille en deux colonnes (barre latérale fixe
   + colonne de contenu coiffée d'un en-tête), puis les blocs de la page.
   Réf. RefonteDashboard/Dashboard Empty.jpg — cadre 1440 px : 24 px de marge à
   gauche, barre latérale de 240 px, gouttière de 140 px, contenu de 900 px,
   136 px de marge à droite. Sous lg, la barre latérale cède la place à une barre
   d'onglets fixée en pied d'écran.
   ---------------------------------------------------------------------------- */

.h-dash-page {
    display: flex;
    max-width: 1440px;
    margin-inline: auto;
    padding: 39px 136px 96px 24px;
}

/* --- Barre latérale ------------------------------------------------------- */

/* La barre latérale suit le défilement : `align-self` l'empêche de s'étirer sur toute
   la hauteur de la page, sans quoi le collage n'aurait aucune course. Le décalage haut
   reprend celui de l'en-tête pour que logo et pastille de compte restent alignés. */
.h-dash-sidebar {
    flex: 0 0 240px;
    width: 240px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 39px;
    align-self: flex-start;
    max-height: calc(100vh - 39px);
    overflow-y: auto;
}

/* Le logo s'aligne sur les libellés de navigation, pas sur le bord des pastilles. */
.h-dash-logo {
    display: block;
    margin: 8px 0 0 56px;
}

.h-dash-logo img {
    display: block;
    width: 120px;
    height: 32px;
}

.h-dash-nav {
    display: flex;
    flex-direction: column;
    margin-top: 64px;
}

.h-dash-nav-link {
    display: flex;
    align-items: center;
    gap: 17px;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-tertiary-color);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

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

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

.h-dash-nav-link.is-disabled {
    cursor: default;
}

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

.h-dash-nav-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* --- Carte de parrainage -------------------------------------------------- */

.h-dash-sponsor {
    margin-top: 40px;
    padding: 12px;
    border: 4px solid #FFFFFF;
    border-radius: var(--bs-border-radius-xl);
    background-color: #EEF0FF;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 9px;
    row-gap: 0;
}

.h-dash-sponsor-icon {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--bs-border-radius);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

.h-dash-sponsor-icon svg {
    width: 20px;
    height: 20px;
}

.h-dash-sponsor-text {
    grid-column: 2;
    grid-row: 1;
}

.h-dash-sponsor-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
}

.h-dash-sponsor-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.1429;
    color: var(--bs-tertiary-color);
}

.h-dash-sponsor-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.h-dash-sponsor-btn:hover {
    color: var(--bs-primary);
}

/* --- Prise de rendez-vous -------------------------------------------------- */

/* Bouton bleu de l'ancien tableau de bord : une action de l'investisseur, donc le bleu des
   actions, à la même taille que le raccourci back-office qui peut le suivre. */
.h-dash-meeting {
    margin-top: 16px;
}

.h-dash-meeting-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 46px;
    padding: 0 16px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary);
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.h-dash-meeting-link:hover,
.h-dash-meeting-shortcut:hover {
    background-color: #477DF7;
    color: #FFFFFF;
}

.h-dash-meeting-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

/* Pastille de l'en-tête : relaie le bouton quand la barre latérale disparaît, sous lg. */
.h-dash-meeting-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #FFFFFF;
    transition: background-color 0.15s ease;
}

.h-dash-meeting-shortcut svg {
    width: 20px;
    height: 20px;
}

/* --- Raccourci back-office ------------------------------------------------- */

/* Séparé du reste par un filet : la navigation au-dessus appartient à l'investisseur,
   ce qui suit relève de l'outillage interne. */
.h-dash-staff {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border-color);
}

/* Aplat sombre : le seul de la page. L'outil interne se distingue au premier coup d'œil de
   l'interface investisseur, sans emprunter ni le bleu des actions ni le lavande du parrainage. */
.h-dash-staff-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 46px;
    padding: 0 16px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.h-dash-staff-link:hover {
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

.h-dash-staff-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

/* Pastille de l'en-tête : relaie le raccourci quand la barre latérale disparaît, sous lg.
   Même aplat sombre, réduit à son picto. */
.h-dash-staff-shortcut {
    display: none;
    align-items: center;
    justify-content: center;
    /* 40 px, comme le déclencheur de navigation : à 360 px, un solde à six chiffres remplit
       déjà l'en-tête, et 44 px le feraient déborder. */
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
    transition: background-color 0.15s ease;
}

.h-dash-staff-shortcut:hover {
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

.h-dash-staff-shortcut svg {
    width: 20px;
    height: 20px;
}

/* --- Colonne de contenu et en-tête ---------------------------------------- */

.h-dash-body {
    flex: 1 1 auto;
    min-width: 0;
    /* La colonne de contenu de la maquette fait 900 px : au-delà, la page respire à droite. */
    max-width: 900px;
    margin-left: 140px;
}

.h-dash-topbar {
    display: flex;
    align-items: center;
    height: 48px;
}

/* Déclencheur du panneau de navigation et logo réduit : mobile uniquement. */
.h-dash-nav-toggle,
.h-dash-logo-mark {
    display: none;
}

.h-dash-topbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.h-dash-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 4px 0 16px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
}

/* Picto du solde : le tracé de l'entrée « Portefeuille » de la navigation, en teinte
   secondaire — il désigne le montant sans lui disputer l'attention. */
.h-dash-balance-icon {
    display: flex;
    flex: 0 0 22px;
    color: var(--bs-tertiary-color);
}

.h-dash-balance-icon svg {
    width: 22px;
    height: 22px;
}

.h-dash-balance-amount {
    font-size: 1rem;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

.h-dash-balance-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

.h-dash-balance-add:hover {
    background-color: var(--bs-link-hover-color);
    color: #FFFFFF;
}

.h-dash-balance-add svg {
    width: 20px;
    height: 20px;
}

.h-dash-account {
    display: flex;
    align-items: center;
    gap: 10px;
    /* La maquette laisse 16 px entre le chevron et le bord droit du contenu. */
    padding-right: 16px;
    text-decoration: none;
    color: inherit;
}

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

/* Pastille de notifications non lues, débordant en haut à droite de l'avatar. */
.h-dash-avatar.has-badge::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 13px;
    height: 13px;
    border: 3px solid var(--bs-body-bg);
    border-radius: 50%;
    background-color: #D65D4C;
}

.h-dash-account-name {
    font-size: 1.125rem;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

.h-dash-account-chevron {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    color: var(--bs-emphasis-color);
}

/* --- Chaîne WhatsApp ------------------------------------------------------- */

/* Bouton de l'en-tête, en pastille blanche bordée ; il déroule le code QR. */
.h-dash-whatsapp-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.h-dash-whatsapp-btn:hover,
.h-dash-whatsapp-btn[aria-expanded="true"] {
    background-color: #EAEAEA;
}

/* Pastille verte du logo WhatsApp. */
.h-dash-whatsapp-btn-icon {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #E3F3E8;
    color: #0F7A40;
}

.h-dash-whatsapp-btn-icon svg {
    width: 15px;
    height: 15px;
}

.h-dash-whatsapp-menu {
    width: 340px;
    padding: 24px;
    border: 0;
    border-radius: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 12px 40px rgba(33, 33, 33, 0.14);
}

/* Bootstrap pose display:block sur le menu ouvert : la colonne se reprend ici. */
.h-dash-whatsapp-menu.show {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.h-dash-whatsapp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.h-dash-whatsapp-title {
    margin: 0 0 6px;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.h-dash-whatsapp-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--bs-secondary-color);
}

/* Croix du déroulant : zone de clic de 44 px, ramenée dans l'angle par ses marges négatives. */
.h-dash-whatsapp-close {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--bs-emphasis-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.h-dash-whatsapp-close:hover {
    background-color: #EAEAEA;
}

.h-dash-whatsapp-close svg {
    width: 16px;
    height: 16px;
}

.h-dash-whatsapp-scan-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 16px;
    background-color: var(--bs-body-bg);
}

.h-dash-whatsapp-menu-qr {
    width: 188px;
    height: 188px;
    padding: 10px;
    border-radius: 10px;
    background-color: #FFFFFF;
}

.h-dash-whatsapp-scan-caption {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Le libellé passe sur deux lignes : la flèche suit le texte au lieu de former une colonne. */
.h-dash-whatsapp-link {
    display: block;
    padding: 4px 0;
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;
    color: var(--bs-primary);
    text-decoration: none;
}

.h-dash-whatsapp-link:hover {
    text-decoration: underline;
}

.h-dash-whatsapp-link svg {
    width: 14px;
    height: 14px;
    margin-left: 4px;
    vertical-align: -2px;
}

/* Encart de l'accueil : code QR sur desktop, où WhatsApp est sur le téléphone ; sous lg, le
   bouton prend sa place et ouvre directement la chaîne. */
.h-dash-whatsapp-banner {
    margin-top: 25px;
}

/* En tête de page, quand ni synthèse ni relance KYC ne le précèdent : rien à séparer au-dessus. */
.h-dash-whatsapp-banner:first-child {
    margin-top: 0;
}

/* Encart refermable : place réservée à la croix, devant le contenu de droite. Le sélecteur
   d'attribut l'emporte sur le padding de .h-dash-alert, déclaré plus bas. */
.h-dash-alert[data-dismissible] {
    position: relative;
    padding-right: 48px;
}

/* Croix de fermeture, discrète, en haut à droite de l'encart. */
.h-dash-alert-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.h-dash-alert-close:hover {
    background-color: rgba(255, 255, 255, 0.7);
    color: var(--bs-emphasis-color);
}

.h-dash-alert-close svg {
    width: 16px;
    height: 16px;
}

.h-dash-whatsapp-banner-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.h-dash-whatsapp-open {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0F6A38;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.h-dash-whatsapp-open:hover {
    color: #0B4F2A;
}

.h-dash-whatsapp-scan {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.h-dash-whatsapp-qr {
    width: 112px;
    height: 112px;
    padding: 8px;
    border-radius: 10px;
    background-color: #FFFFFF;
}

.h-dash-whatsapp-scan-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Bouton d'ouverture directe, réservé au mobile. */
.h-dash-whatsapp-join {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #0F7A40;
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.h-dash-whatsapp-join:hover {
    background-color: #0B5F32;
    color: #FFFFFF;
}

.h-dash-whatsapp-join svg {
    width: 14px;
    height: 14px;
}

.h-dash-shell {
    margin-top: 56px;
    display: flex;
    flex-direction: column;
}

/* --- Relance de complétion du dossier ------------------------------------- */

.h-dash-alert {
    display: flex;
    align-items: center;
    gap: 21px;
    padding: 20px 16px 20px 20px;
    border-radius: var(--bs-border-radius-xl);
    background-color: #F5ECDD;
}

.h-dash-alert-icon {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
}

.h-dash-alert-icon svg {
    width: 22px;
    height: 22px;
}

.h-dash-alert-text {
    min-width: 0;
}

.h-dash-alert-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
}

.h-dash-alert-desc {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.1429;
    color: var(--bs-secondary-color);
}

.h-dash-alert-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 36px;
    margin-left: auto;
    padding: 0 16px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.h-dash-alert-btn:hover {
    color: var(--bs-primary);
}

/* --- Actions principales -------------------------------------------------- */

.h-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    margin-top: 40px;
}

.h-dash-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 23px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.h-dash-action:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

.h-dash-action svg {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

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

.h-dash-action.is-primary:hover {
    border-color: var(--bs-link-hover-color);
    background-color: var(--bs-link-hover-color);
    color: #FFFFFF;
}

/* --- Emplacement du premier investissement -------------------------------- */

.h-dash-next {
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: 100%;
    height: 212px;
    margin-top: 32px;
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    background-color: #EEE9E3;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease-in-out;
}

/* Bandeau supérieur : silhouette de la photo d'une carte projet. */
.h-dash-next-media {
    display: block;
    height: 38px;
    background-color: var(--bs-border-color);
}

.h-dash-next-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 23px;
}

.h-dash-next-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

.h-dash-next-plus svg {
    width: 22px;
    height: 22px;
}

.h-dash-next-label {
    font-size: 1.1875rem;
    color: var(--bs-emphasis-color);
}

/* --- En-tête de section (titre + lien « Voir tout ») ---------------------- */

.h-dash-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.h-dash-section-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.h-dash-section-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Aligne le chevron sur le retrait droit du contenu, comme l'en-tête de compte. */
    padding-right: 20px;
    color: var(--bs-link-color);
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
}

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

.h-dash-section-link svg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

/* --- Carrousel d'opportunités --------------------------------------------- */

.h-dash-opps {
    margin-top: 42px;
}

/* La piste déborde volontairement à droite : la dernière carte visible est coupée
   par le fondu, qui signale qu'il reste des projets à faire défiler. */
.h-dash-opps-track {
    position: relative;
    margin-top: 26px;
}

/* La piste générique réserve une gouttière basse pour sa barre de défilement ;
   ici elle décalerait le centrage vertical de la flèche. */
.h-dash-opps-track .h-carousel {
    padding-bottom: 0;
}

.h-dash-opps-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 140px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(245, 242, 237, 0) 0%, rgba(245, 242, 237, 0.92) 70%, var(--bs-body-bg) 100%);
    transition: opacity 0.2s ease;
}

/* Fondu et flèche de retour, symétriques de ceux de droite. */
.h-dash-opps-fade.is-prev {
    right: auto;
    left: 0;
    background: linear-gradient(to left, rgba(245, 242, 237, 0) 0%, rgba(245, 242, 237, 0.92) 70%, var(--bs-body-bg) 100%);
}

.h-dash-opps-arrow.is-prev {
    right: auto;
    left: 26px;
}

/* Chaque bord annonce ce qui se trouve au-delà de lui : au début, rien à gauche ; en bout de
   course, rien à droite. L'affordance inutile s'efface plutôt que de masquer une carte. */
.is-start .h-dash-opps-fade.is-prev,
.is-start .h-dash-opps-arrow.is-prev,
.is-end .h-dash-opps-fade:not(.is-prev),
.is-end .h-dash-opps-arrow:not(.is-prev) {
    opacity: 0;
    pointer-events: none;
}

.h-dash-opps-arrow {
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    box-shadow: 0 4px 16px rgba(33, 33, 33, 0.1);
    transition: opacity 0.2s ease, color 0.15s ease;
}

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

.h-dash-opps-arrow svg {
    width: 22px;
    height: 22px;
}

/* --- Cartes de contenu ---------------------------------------------------- */

.h-dash-card {
    margin-top: 25px;
    padding: 24px;
    border-radius: var(--bs-border-radius-xl);
    background-color: #FFFFFF;
}

/* Rangée de deux cartes : diversification (large) et activité récente. */
.h-dash-row {
    display: grid;
    grid-template-columns: minmax(0, 514fr) minmax(0, 360fr);
    gap: 25px;
    margin-top: 25px;
}

.h-dash-row .h-dash-card {
    margin-top: 0;
    /* Hauteur de rangée figée par la maquette : les deux cartes respirent sous leur contenu. */
    min-height: 318px;
}

/* --- Prochains versements -------------------------------------------------- */

.h-dash-payouts-total {
    margin: 40px 0 0;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.h-dash-payouts-caption {
    margin: 8px 0 0;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

/* Axe des douze mois. Les colonnes gardent leur hauteur même à zéro : le graphique
   annonce la période couverte, pas seulement les montants attendus. */
.h-dash-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
    margin-top: 152px;
}

/* Sur la page de l'échéancier, le graphique n'a pas à tenir la hauteur de la carte de l'accueil :
   il suit son titre. */
.h-dash-chart.is-compact {
    margin-top: 32px;
}

.h-dash-chart-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.h-dash-chart-bar {
    display: flex;
    align-items: flex-end;
    height: 73px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #EEF0FF;
}

/* Remplissage du mois, proportionnel au mois le plus fourni : c'est le gabarit qui pose la part
   dans --h-share, un montant en euros ne se traduisant pas en pixels. Un mois qui attend un
   versement garde une hauteur minimale, sans quoi les petits montants seraient invisibles. */
.h-dash-chart-fill {
    display: block;
    width: 100%;
    min-height: 4px;
    height: calc(var(--h-share, 0) * 100%);
    border-radius: 6px;
    background-color: #E8D1B2;
}

.h-dash-chart-fill.is-empty {
    min-height: 0;
    height: 0;
}

/* Précision de lecture sous l'échéancier : montant en préparation, projets sans contrat exploitable. */
.h-dash-payouts-note {
    margin: 16px 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--bs-tertiary-color);
}

.h-dash-tablelink {
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.h-dash-tablelink:hover,
.h-dash-tablelink:focus-visible {
    text-decoration: underline;
}

.h-dash-chart-label {
    margin-top: 10px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

/* --- Diversification ------------------------------------------------------- */

.h-dash-diversif-body {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 44px;
}

/* Anneau en CSS pur : le dégradé conique porte les parts, le disque central les évide. */
.h-dash-donut {
    position: relative;
    flex: 0 0 162px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 162px;
    border-radius: 50%;
    background-color: #A8ACAD;
}

.h-dash-donut::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background-color: #FFFFFF;
}

.h-dash-donut-total,
.h-dash-donut-caption {
    position: relative;
    z-index: 1;
}

.h-dash-donut-total {
    font-size: 1rem;
    color: var(--bs-emphasis-color);
}

.h-dash-donut-caption {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-diversif-legend {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.h-dash-diversif-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 24px;
    align-items: center;
    gap: 8px;
}

.h-dash-diversif-label {
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

/* Jauge en traits : la part remplie est colorée, le reste garde la trame claire. */
.h-dash-diversif-meter {
    display: block;
    height: 13px;
    background:
        linear-gradient(to right, var(--bs-primary) 0 var(--h-part, 0%), transparent var(--h-part, 0%) 100%),
        linear-gradient(to right, #C9C9C9 0 100%);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
    mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 4px);
}

.h-dash-diversif-value {
    text-align: right;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

/* Une seule famille détenue : un anneau d'une seule part n'apprend rien, la carte
   annonce la situation et invite à répartir. Même marge haute que le corps du
   graphique, pour que la carte s'ouvre au même endroit dans les deux états. */
.h-dash-diversif-single {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 44px;
}

.h-dash-diversif-single-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--bs-tertiary-color);
}

/* --- Activité récente ------------------------------------------------------ */

.h-dash-section-link.is-icon-only {
    gap: 0;
    padding-right: 14px;
}

.h-dash-empty {
    margin-top: 73px;
    padding: 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #EAEAEA;
}

.h-dash-empty-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-empty-icon {
    flex: 0 0 26px;
    display: flex;
    color: var(--bs-tertiary-color);
}

.h-dash-empty-icon svg {
    width: 26px;
    height: 26px;
}

.h-dash-empty-desc {
    margin: 15px 0 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.h-dash-activity-list {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.h-dash-activity-item + .h-dash-activity-item {
    border-top: 1px solid var(--bs-body-bg);
}

.h-dash-activity-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
}

/* --- Mes investissements --------------------------------------------------- */

/* Variante de l'état vide portant un appel à l'action à droite du texte. */
.h-dash-empty.has-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 36px;
}

.h-dash-empty-text {
    min-width: 0;
}

.h-dash-empty-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 27px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary);
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.h-dash-empty-btn:hover {
    background-color: var(--bs-link-hover-color);
    color: #FFFFFF;
}

.h-dash-empty-btn svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

/* --- En-tête de portefeuille (état investisseur) --------------------------- */

.h-dash-portfolio-label {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

.h-dash-portfolio-amount {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 4px 0 0;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 3.4375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.h-dash-portfolio-currency {
    font-size: 1.5rem;
    font-weight: 400;
}

.h-dash-gain-amount {
    font-weight: 500;
    color: var(--bs-success);
}

.h-dash-gain-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.h-dash-gain-pill svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}

/* Tuiles d'indicateurs : autant de colonnes que d'indicateurs disponibles. */
.h-dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 283px));
    gap: 16px;
    margin-top: 8px;
}

.h-dash-tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #EEE9E3;
}

.h-dash-tile-label {
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

/* Les libellés ne tiennent pas tous sur une ligne : la valeur se plaque en pied de tuile
   pour que les trois chiffres se lisent sur la même ligne. */
.h-dash-tile-value {
    margin-top: auto;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-success);
}

/* --- Cartes de familles de produits --------------------------------------- */

.h-dash-families {
    margin-top: 39px;
}

/* En état investisseur, la barre d'actions suit la synthèse de portefeuille de plus près
   que le bandeau de relance qu'elle remplace. */
.h-dash-portfolio + .h-dash-actions {
    margin-top: 16px;
}

.h-dash-families-track {
    position: relative;
}

.h-dash-family {
    display: flex;
    flex-direction: column;
    width: 361px;
    max-width: 100%;
    border-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    background-color: #FFFFFF;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease-in-out;
}

/* Les quatre états de la maquette portent sur le corps de la carte : seul le fond change,
   le bandeau garde sa couleur de famille et les icônes restent sombres. */
.h-dash-family:hover,
.h-dash-next:hover {
    background-color: #EAEAEA;
}

.h-dash-family:active,
.h-dash-next:active {
    background-color: var(--bs-primary-bg-subtle);
}

.h-dash-family:focus-visible,
.h-dash-next:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 0;
}

/* Le bandeau porte la couleur de la famille et le nombre de biens détenus. */
.h-dash-family-band {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 24px;
    font-size: 0.9375rem;
    color: var(--bs-emphasis-color);
    background-color: var(--bs-border-color);
}

.h-dash-family.is-crowdfunding .h-dash-family-band {
    background-color: #E8D1B2;
}

.h-dash-family.is-fractional .h-dash-family-band {
    background-color: #EEF0FF;
}

.h-dash-family.is-scpi .h-dash-family-band {
    background-color: var(--bs-primary-bg-subtle);
}

.h-dash-family-body {
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
}

.h-dash-family-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.h-dash-family-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Pastille du nombre de souscriptions, dans le ton accent des chiffres financiers. */
.h-dash-family-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background-color: #F3E9DB;
    color: var(--bs-accent);
    font-size: 0.9375rem;
    line-height: 1;
}

.h-dash-family-name {
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-family-chevron {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: var(--bs-emphasis-color);
}

.h-dash-family-amount {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 17px;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.h-dash-family-currency {
    font-size: 1rem;
    font-weight: 400;
}

.h-dash-family-gain {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 19px;
    font-size: 0.9375rem;
    line-height: 1.2;
}

/* Place réservée à la ligne « Versement programmé » de la maquette : vide faute de source,
   elle tient la hauteur de carte du gabarit. */
.h-dash-family-schedule {
    display: block;
    margin-top: 8px;
    min-height: 18px;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

/* Dans la piste du portefeuille, l'emplacement du prochain projet suit les cartes : sa hauteur
   n'est plus imposée, c'est la carte la plus haute qui la donne à toute la piste. Sans quoi les
   cartes sans gains creusaient un vide sous leur montant. */
.h-dash-families .h-dash-next {
    width: 361px;
    height: auto;
    margin-top: 0;
}

/* --- Diversification : sélecteur de vue et vue tableau --------------------- */

.h-dash-viewswitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #EAEAEA;
}

.h-dash-viewswitch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-tertiary-color);
}

.h-dash-viewswitch-btn.is-active {
    background-color: #C9C9C9;
    color: var(--bs-emphasis-color);
}

.h-dash-viewswitch-btn svg {
    width: 20px;
    height: 20px;
}

/* Mosaïque : les surfaces suivent les parts. La plus grosse famille tient une colonne pleine
   hauteur, les autres se partagent la colonne restante. Aucun bloc ne descend sous la taille de
   son texte, ni en hauteur ni en largeur : une part infime garde de quoi afficher son montant
   plutôt que de se réduire à un filet et de laisser fuir son contenu. */
.h-dash-mosaic {
    display: flex;
    gap: 4px;
    height: 208px;
    margin-top: 32px;
}

.h-dash-mosaic-col {
    /* Base nulle comme les blocs : sans elle, la colonne partirait de la largeur de son texte
       et les surfaces ne suivraient plus les parts. Le minimum, lui, reste au contenu. */
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.h-dash-mosaic-cell {
    flex: 1 1 0;
    /* `auto` sur les deux axes : le contenu fixe le minimum, le bloc ne peut pas être écrasé
       sous son texte. Le libellé, lui, se tronque et n'impose donc pas sa longueur. */
    min-width: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Rembourrage porté par le texte : sur un bloc en border-box, la base flexible ne peut pas
       descendre sous le rembourrage horizontal, ce qui fausserait le partage des surfaces. */
    padding: 8px 0;
    border-radius: 6px;
    text-align: center;
}

.h-dash-mosaic-amount {
    padding-inline: 12px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-mosaic-label {
    max-width: 100%;
    padding-inline: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

/* La part vit sur sa propre ligne : elle survit à la troncature du libellé, qui la
   emportait avec lui dans les blocs étroits. */
.h-dash-mosaic-share {
    padding-inline: 12px;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.h-dash-mosaic-cell.is-crowdfunding {
    background-color: #E7D0B2;
}

.h-dash-mosaic-cell.is-fractional {
    background-color: #EEF0FF;
}

/* Couleurs des familles portées par l'anneau et ses jauges. Les SCPI, sorties du
   graphique, n'y ont plus de teinte : leur carton de famille tient la sienne du
   jeton --bs-primary-bg-subtle. */
.h-dash-diversif {
    --h-part-crowdfunding: #BE9054;
    --h-part-fractional:   #2D37D6;
}

.h-dash-diversif-meter.is-crowdfunding {
    color: var(--h-part-crowdfunding);
}

.h-dash-diversif-meter.is-fractional {
    color: var(--h-part-fractional);
}

.h-dash-diversif-meter {
    background:
        linear-gradient(to right, currentColor 0 var(--h-part, 0%), transparent var(--h-part, 0%) 100%),
        linear-gradient(to right, #C9C9C9 0 100%);
}

/* --- Activité récente : liste garnie --------------------------------------- */

.h-dash-activity-link {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 0;
}

/* La dernière entrée s'arrête au bord du texte : le rembourrage de la carte suffit dessous. */
.h-dash-activity-item:last-child .h-dash-activity-link {
    padding-bottom: 0;
}

/* Une notification ouvre le volet de lecture : son entrée est un bouton, ramené à l'allure d'un lien. */
button.h-dash-activity-link {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

.h-dash-activity-icon {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background-color: #EEF0FF;
    color: var(--bs-primary);
}

/* Une sortie de projet se signale par le ton chaud des produits immobiliers. */
.h-dash-activity-icon.is-project {
    background-color: #F5ECDD;
    color: #7B6132;
}

.h-dash-activity-icon svg {
    width: 18px;
    height: 18px;
}

/* Pile de l'entrée : intitulé de l'événement, détail, puis ancienneté. */
.h-dash-activity-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Deux lignes plutôt qu'une : sur mobile, un intitulé de notification tient rarement sur une
   seule ligne, et le couper au premier tiers faisait disparaître le nom du projet — deux entrées
   voisines affichaient alors le même début de phrase et devenaient indistinguables. */
.h-dash-activity-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.h-dash-activity-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--bs-body-color);
}

.h-dash-activity-date {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--bs-tertiary-color);
}

/* --- Mes investissements : lignes de portefeuille -------------------------- */

.h-dash-lines {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.h-dash-line + .h-dash-line {
    border-top: 1px solid var(--bs-border-color);
}

.h-dash-line-link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) 20px;
    align-items: center;
    gap: 16px;
    /* Retrait horizontal : la bande de survol occupe toute la largeur du contenu de la carte,
       le contenu de la ligne respire à l'intérieur. */
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

/* La ligne peut être un bouton, quand elle ouvre le volet de détail : il perd ses habits
   natifs pour se lire comme la ligne-lien. */
button.h-dash-line-link {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Survol : bande pleine largeur, sans arrondi, entre les deux filets de séparation. */
.h-dash-line-link:hover {
    background-color: #EAEAEA;
}

.h-dash-line-media {
    width: 44px;
    height: 44px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-border-color);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.h-dash-line-identity,
.h-dash-line-yield,
.h-dash-line-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.h-dash-line-name {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-line-amount {
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-accent);
}

.h-dash-line-value {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-line-caption {
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

.h-dash-line-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-success);
}

.h-dash-line-badge svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.h-dash-line-chevron {
    width: 20px;
    height: 20px;
    color: var(--bs-tertiary-color);
}



/* Sous la largeur de la maquette, la gouttière entre la barre latérale et le contenu
   se resserre pour rendre la place à la colonne de contenu. */
@media (max-width: 1439.98px) {
    .h-dash-page {
        padding-right: 40px;
    }
    .h-dash-body {
        margin-left: 56px;
    }
}

/* La rangée à deux cartes n'a plus la place de tenir ses proportions : elle s'empile. */
@media (max-width: 1279.98px) {
    .h-dash-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .h-dash-row .h-dash-card {
        min-height: 0;
    }
}

/* --- Portefeuille par produit : en-tête, indicateurs et lignes détenues ----- */

.h-dash-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

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

.h-dash-back svg {
    width: 22px;
    height: 22px;
}

.h-dash-producthead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 35px;
}

.h-dash-producthead-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
}

.h-dash-producthead-mark svg {
    width: 14px;
    height: 23px;
}

/* La marque de la maison est un « h » étroit ; un picto de contour, lui, est carré. */
.h-dash-producthead-mark.is-icon svg {
    width: 19px;
    height: 19px;
}

.h-dash-producthead-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

/* Quatre indicateurs de tête, en colonnes égales. */
.h-dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 33px;
}

.h-dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #EEE9E3;
}

.h-dash-kpi-label {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-kpi-value {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.h-dash-kpi-value.is-gain {
    color: var(--bs-success);
}

.h-dash-kpi-caption {
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--bs-tertiary-color);
}

/* Prochaine échéance : seule la date est connue, aucun montant n'est estimé. */
.h-dash-nextdue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 14px 20px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #F5ECDD;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}

.h-dash-nextdue svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.h-dash-nextdue strong {
    margin-left: auto;
    color: var(--bs-emphasis-color);
}

/* --- Onglets et outils ----------------------------------------------------- */

.h-dash-holdings {
    margin-top: 42px;
}

.h-dash-holdings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.h-dash-tabs {
    display: flex;
    gap: 24px;
}

.h-dash-tab-link {
    position: relative;
    padding: 0 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--bs-tertiary-color);
    font-size: 1rem;
    line-height: 1.2;
}

/* Le soulignement fixe la hauteur de l'onglet à 33px, sous la cible tactile recommandée. Un
   pseudo-élément transparent porte les 44px sans déplacer le texte ni le trait : agrandir
   l'onglet lui-même décalerait toute la barre. La largeur reste celle du libellé, les onglets
   étant côte à côte. */
.h-dash-tab-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
}

.h-dash-tab-link.is-active {
    border-bottom-color: var(--bs-primary);
    color: var(--bs-primary);
}

.h-dash-holdings-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h-dash-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.h-dash-tool:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

.h-dash-tool svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

/* Champ de recherche : réduit à sa loupe, il s'ouvre quand on le vise. */
.h-dash-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

.h-dash-search svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.h-dash-search input {
    width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    color: var(--bs-emphasis-color);
    transition: width 0.2s ease;
}

.h-dash-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.h-dash-search:focus-within input,
.h-dash-search input:not(:placeholder-shown) {
    width: 160px;
}

.h-dash-search input:focus {
    outline: none;
}

/* --- Sous-filtres de l'onglet des remboursements --------------------------- */

/* Les filtres passent à la ligne plutôt que de défiler : sous 400px la rangée débordait
   systématiquement — « Mon compte » sur les notifications, « Remboursés » sur les
   remboursements — et un chip coupé sans indice de scroll se lit comme un défaut d'affichage.
   Le composant sert quatre pages : le défaut se corrige ici, pas dans chacune. */
.h-dash-subfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.h-dash-subfilter {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 36px;
    white-space: nowrap;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-pill);
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
    line-height: 1;
    /* Le filtre est parfois un lien — il porte alors le filtre dans l'URL, ce qui rend la vue
       partageable et la page utilisable sans script. Il ne doit pas s'en souligner pour autant. */
    text-decoration: none;
}

.h-dash-subfilter.is-active {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}

/* --- Tableau des lignes détenues ------------------------------------------- */

/* Le tableau défile horizontalement quand la place manque ; la flèche, elle, reste
   accrochée au bord de l'enveloppe et ne part pas avec le contenu. */
.h-dash-tablewrap {
    position: relative;
}

.h-dash-tablescroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Posée près des premières lignes, comme sur la maquette mobile, plutôt qu'au centre
   d'un tableau dont la hauteur dépend du nombre de projets. */
.h-dash-tablescroll {
    display: flex;
    position: absolute;
    top: 140px;
    right: 8px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--bs-emphasis-color);
}

.h-dash-tablescroll[hidden] {
    display: none;
}

.h-dash-tablescroll svg {
    width: 18px;
    height: 18px;
}

.h-dash-table {
    width: 100%;
    margin-top: 24px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
}

.h-dash-table thead th {
    padding: 14px 16px;
    background-color: #EEE9E3;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
    text-align: left;
}

.h-dash-table thead th:first-child {
    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
}

.h-dash-table thead th:last-child {
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
}

.h-dash-table th.is-num,
.h-dash-table td.is-num {
    text-align: right;
}

.h-dash-table th.is-end,
.h-dash-table td.is-end {
    text-align: right;
}

.h-dash-table tbody th,
.h-dash-table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 400;
    color: var(--bs-emphasis-color);
    vertical-align: middle;
}

.h-dash-table tbody tr:last-child th,
.h-dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.h-dash-table-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.h-dash-table-media {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-border-color);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.h-dash-table-identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.h-dash-table-name {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-dash-table-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.h-dash-table-promoter {
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--bs-tertiary-color);
}

/* Le montant a sa colonne tant que le tableau les montre toutes. */
.h-dash-table-amount {
    display: none;
}

.h-dash-table-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* Avancement du remboursement : montant, jauge, part. */
.h-dash-progress {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 140px;
}

.h-dash-progress-track {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #E8DFD3;
    overflow: hidden;
}

.h-dash-progress-fill {
    display: block;
    height: 100%;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-progress-fill);
}

/* Moins de la moitié du capital rendu : la jauge reste ambrée. */
.h-dash-progress-fill.is-low {
    background-color: #D9BE89;
}

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

/* --- Pastilles de statut ---------------------------------------------------- */

.h-dash-pill {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--bs-border-radius-pill);
    background-color: #EAEAEA;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* L'argent revient, ou est revenu. */
.h-dash-pill.is-ok {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

/* Rien n'est encore versé : le projet suit son cours, sans nouvelle à donner. */
.h-dash-pill.is-idle {
    background-color: #EAEAEA;
    color: var(--bs-secondary-color);
}

/* L'échéance n'est plus ferme : prorogation, annuités, ou projet annulé. */
/* L'échéance a bougé sans que l'argent soit en péril : prorogation actée. Le bleu de la marque,
   comme les autres surfaces d'information de la page. Tonalité décidée en production (#39/#947),
   rapportée ici par la fusion de main. */
.h-dash-pill.is-info {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* Le projet est annulé : la ligne ne rendra rien de plus. C'est désormais le seul cas rouge, le
   rééchelonnement ayant pris le bleu au-dessus. */
.h-dash-pill.is-warn {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger);
}

.h-dash-holdings-empty {
    margin: 24px 0 0;
    padding: 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    font-size: 0.9375rem;
    color: var(--bs-tertiary-color);
}

/* Sous lg, les quatre indicateurs passent en 2 × 2 et le tableau défile sous une
   colonne « Projet » figée, conformément à la maquette mobile. */
@media (max-width: 991.98px) {
    .h-dash-back {
        width: 44px;
        height: 44px;
    }
    .h-dash-producthead {
        margin-top: 24px;
    }
    .h-dash-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 24px;
    }
    .h-dash-holdings {
        margin-top: 32px;
    }
    .h-dash-table {
        min-width: 700px;
    }
    .h-dash-table thead th {
        white-space: nowrap;
    }
    /* Largeur figée : sans elle, les noms de promoteurs les plus longs élargiraient
       la colonne figée jusqu'à masquer les montants. */
    .h-dash-table thead th:first-child,
    .h-dash-table tbody th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 190px;
        max-width: 190px;
        box-shadow: 1px 0 0 var(--bs-border-color);
    }
    .h-dash-table thead th:first-child {
        background-color: #EEE9E3;
    }
    .h-dash-table tbody th:first-child {
        background-color: var(--bs-body-bg);
    }
    .h-dash-table-name,
    .h-dash-table-promoter {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Sur téléphone, plus de place pour un tableau : il se réduit à la colonne du projet, où le
   montant investi rejoint le promoteur. Le reste — avancement, échéance, statut — se lit dans
   le volet qu'un appui sur la ligne ouvre, ce que le chevron annonce. Montré à part, le montant
   tenait une colonne dont la largeur minimale, ajoutée à celle des noms, ramenait le
   défilement horizontal que ce tableau demandait déjà. */
@media (max-width: 767.98px) {
    /* Le tableau se réduit à la colonne du projet, où le montant investi rejoint le
       promoteur : montré à part, il tenait une colonne dont la largeur minimale, ajoutée à
       celle des noms, ramenait le défilement horizontal. Avancement, échéance et statut se
       lisent dans le volet qu'un appui sur la ligne ouvre. */
    .h-dash-table {
        /* Largeur imposée : sans elle, un nom de projet long fixe la largeur de la colonne
           et déborde de l'écran au lieu de se laisser couper. */
        table-layout: fixed;
    }
    .h-dash-table thead th:not(:first-child),
    .h-dash-table tbody td {
        display: none;
    }
    .h-dash-table thead th:first-child {
        border-radius: var(--bs-border-radius-lg);
    }
    .h-dash-table thead th,
    .h-dash-table tbody th {
        padding-inline: 12px;
    }
    .h-dash-table-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .h-dash-table-amount {
        display: inline;
        flex: 0 0 auto;
        font-size: 0.8125rem;
        line-height: 1.2;
        color: var(--bs-emphasis-color);
    }
    /* Point médian entre les deux, seulement quand le promoteur est connu. */
    .h-dash-table-promoter + .h-dash-table-amount::before {
        content: '·';
        margin-right: 6px;
        color: var(--bs-tertiary-color);
    }
    /* Rien n'indiquerait plus qu'une ligne s'ouvre : sans survol, le chevron est le seul
       signe qu'un appui mène au détail. */
    .h-dash-table tbody th {
        padding-right: 28px;
    }
    .h-dash-table tbody th::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 13px;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-top: 1.5px solid var(--bs-tertiary-color);
        border-right: 1.5px solid var(--bs-tertiary-color);
        transform: rotate(45deg);
    }
    /* La colonne du projet n'a plus de voisine à laisser défiler sous elle. Elle reste
       positionnée, mais relative : c'est d'elle que le chevron prend ses repères. */
    .h-dash-table {
        min-width: 0;
    }
    .h-dash-table thead th:first-child,
    .h-dash-table tbody th:first-child {
        position: relative;
        left: auto;
        min-width: 0;
        max-width: none;
        box-shadow: none;
    }
}

@media (max-width: 575.98px) {
    .h-dash-kpi {
        padding: 16px;
    }
    .h-dash-kpi-value {
        font-size: 1.375rem;
    }
    .h-dash-holdings-tools {
        gap: 8px;
    }
}

/* --- Barre d'onglets mobile ------------------------------------------------ */

/* Remplace la barre latérale sous lg. Fixée en pied d'écran, elle reprend les quatre
   destinations de la navigation ; le parrainage, lui, reste à la barre latérale. */
.h-dash-tabbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    /* Les onglets s'étirent à la hauteur du plus haut : un libellé sur deux lignes ne décale
       pas les autres. */
    align-items: stretch;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px));
    background-color: #FFFFFF;
}

.h-dash-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    /* Calé en haut : les pictos restent alignés quand un libellé prend deux lignes. */
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 52px;
    padding: 9px 4px 6px;
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-tertiary-color);
    text-decoration: none;
}

.h-dash-tab.is-active {
    background-color: #EAEAEA;
    color: var(--bs-emphasis-color);
}

.h-dash-tab.is-disabled {
    cursor: default;
}

.h-dash-tab-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

/* Le libellé passe à la ligne entre deux mots plutôt que d'être tronqué : « Mes
   investissements » ne tient pas sur une ligne à 390 px. */
.h-dash-tab-label {
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
}

/* --- Repères de position du carrousel de portefeuille ---------------------- */

.h-dash-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.h-dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--bs-border-color);
    transition: background-color 0.15s ease;
}

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

@media (max-width: 991.98px) {
    .h-dash-page {
        display: block;
        padding: 16px 16px 64px;
    }
    .h-dash-body {
        margin-left: 0;
    }
    .h-dash-topbar {
        gap: 12px;
    }
    .h-dash-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: -8px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--bs-emphasis-color);
    }
    .h-dash-nav-toggle svg {
        width: 24px;
        height: 24px;
    }
    .h-dash-logo-mark {
        display: block;
        color: var(--bs-emphasis-color);
    }
    .h-dash-logo-mark svg {
        display: block;
        width: 18px;
        height: 30px;
    }
    .h-dash-account-name,
    .h-dash-account-chevron {
        display: none;
    }
    .h-dash-topbar-actions {
        gap: 12px;
    }
    .h-dash-balance {
        height: 44px;
        padding: 0 4px 0 12px;
        gap: 8px;
    }
    .h-dash-balance-icon {
        flex-basis: 20px;
    }
    .h-dash-balance-icon svg {
        width: 20px;
        height: 20px;
    }
    .h-dash-balance-add {
        width: 36px;
        height: 36px;
    }
    .h-dash-avatar {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
    .h-dash-shell {
        margin-top: 24px;
    }

    /* La barre latérale cède la place à la barre d'onglets de pied d'écran. */
    .h-dash-sidebar {
        display: none;
    }
    .h-dash-tabbar {
        display: flex;
    }
    /* Son raccourci back-office passe dans l'en-tête. */
    .h-dash-staff-shortcut,
    .h-dash-meeting-shortcut,
    .h-dash-whatsapp-join {
        display: flex;
    }
    /* Le code QR n'a pas de sens sur l'appareil qui le scannerait, ni le lien « sur cet
       ordinateur » : le bouton de l'encart et le menu de compte prennent le relais. */
    .h-dash-whatsapp,
    .h-dash-whatsapp-scan,
    .h-dash-whatsapp-open {
        display: none;
    }
    /* Le contenu ne doit pas finir sous la barre d'onglets. */
    .h-dash-page {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    /* Les liens de section se réduisent à leur chevron : le titre porte déjà le sens. */
    .h-dash-section-link {
        position: relative;
        gap: 0;
        padding-right: 0;
        font-size: 0;
    }
    /* Réduit à son chevron, le lien ne fait plus que 24px de côté — la moitié de la cible
       tactile recommandée, alors qu'il ouvre la liste complète de la section. Un pseudo-élément
       transparent porte la zone de 44px sans toucher au dessin. */
    .h-dash-section-link::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    /* La bascule graphique/tableau garde sa largeur : ses deux boutons ne sont séparés que de
       2px, et des zones de 44px se recouvriraient — celle du second happerait la moitié du
       premier. Seule la hauteur s'étend. */
    .h-dash-viewswitch-btn {
        position: relative;
    }
    .h-dash-viewswitch-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 44px;
        transform: translateY(-50%);
    }
    /* Deux indicateurs de front : le troisième porte un montant, qu'un tiers d'écran tronquerait.
       Il prend alors toute la largeur, la tuile portant la classe is-wide. */
    .h-dash-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }
    .h-dash-tile.is-wide {
        grid-column: 1 / -1;
    }
    .h-dash-tile {
        padding: 12px;
        gap: 10px;
    }
    .h-dash-tile-label {
        font-size: 0.875rem;
    }
    .h-dash-tile-value {
        font-size: 1.375rem;
    }
    /* Les actions passent à la ligne. Elles ont d'abord défilé horizontalement, la dernière
       débordant pour annoncer la suite : à 390px il n'en dépassait que 6px, sans flèche ni
       dégradé de bord, et « Capacité d'exposition » était invisible — donc inexistante. Deux
       rangées coûtent 48px de hauteur et montrent les trois actions d'un coup d'œil. */
    .h-dash-action {
        height: 36px;
        padding: 0 18px;
    }
    .h-dash-dots {
        display: flex;
    }
}


/* Sous lg, les deux colonnes de cartes s'empilent et la rangée cesse d'imposer
   la hauteur figée de la maquette desktop. */
@media (max-width: 991.98px) {
    .h-dash-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 16px;
    }
    .h-dash-row .h-dash-card {
        min-height: 0;
    }
    .h-dash-card {
        margin-top: 16px;
    }
    .h-dash-opps {
        margin-top: 32px;
    }
    .h-dash-opps-track {
        margin-top: 20px;
    }
    /* La flèche recouvrirait les cartes sur une piste étroite : le geste tactile suffit. */
    .h-dash-opps-arrow,
    .h-dash-opps-fade {
        display: none;
    }
    .h-dash-payouts-total {
        margin-top: 24px;
    }
    .h-dash-chart {
        margin-top: 40px;
    }
    .h-dash-diversif-body {
        margin-top: 28px;
        gap: 32px;
    }
    .h-dash-empty {
        margin-top: 28px;
    }
}

@media (max-width: 767.98px) {
    .h-dash-card {
        padding: 16px;
    }
    /* Le bandeau de relance passe en pile : icône et texte restent sur une ligne,
       le bouton reprend toute la largeur en dessous. */
    .h-dash-alert {
        flex-wrap: wrap;
        gap: 16px;
    }
    .h-dash-alert-text {
        flex: 1 1 200px;
    }
    .h-dash-alert-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
    .h-dash-actions {
        gap: 12px;
    }
    .h-dash-next {
        width: 100%;
    }
    /* Douze barres fines tiennent dans la largeur ; les libellés de mois, eux, non :
       le graphique n'annonce plus que la forme de l'échéancier. */
    .h-dash-chart {
        gap: 2px;
    }
    .h-dash-chart-label {
        display: none;
    }
    /* Colonne étroite : l'anneau garde sa place à gauche, mais la légende n'a plus la largeur
       de tenir label, jauge et part sur une ligne — le label passe au-dessus. */
    .h-dash-diversif-body {
        gap: 16px;
    }
    .h-dash-diversif-legend {
        gap: 16px;
    }
    .h-dash-diversif-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
    }
    .h-dash-diversif-label {
        grid-column: 1 / -1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .h-dash-mosaic {
        height: 193px;
        margin-top: 24px;
    }
    .h-dash-empty.has-action {
        flex-direction: column;
        align-items: stretch;
    }
    .h-dash-empty-btn {
        justify-content: center;
    }
    /* Une ligne par investissement : le taux cède la place, le statut suffit à qualifier
       la ligne et le détail se lit sur la page du projet.
       Le statut passe sous le nom plutôt que de lui disputer la largeur : en une seule rangée,
       sa colonne se servait à son contenu — « En cours de remboursement » réclamait alors tout
       l'espace et écrasait la colonne d'identité jusqu'à superposer le nom et le montant au
       badge. La vignette et le chevron enjambent les deux rangées, centrés. */
    .h-dash-line-link {
        grid-template-columns: 44px minmax(0, 1fr) 20px;
        grid-template-areas:
            "media identity chevron"
            "media status   chevron";
        gap: 4px 12px;
        padding: 12px;
    }
    .h-dash-line-media {
        grid-area: media;
    }
    .h-dash-line-identity {
        grid-area: identity;
    }
    .h-dash-line-status {
        grid-area: status;
    }
    .h-dash-line-chevron {
        grid-area: chevron;
    }
    .h-dash-line-yield {
        display: none;
    }
    /* Un statut long tient sur deux lignes sous 400px : la pastille se cale alors sur la première
       plutôt que de flotter entre les deux. */
    .h-dash-line-badge {
        align-items: flex-start;
    }
    /* Le nom occupe désormais toute la largeur utile ; la troncature ne sert plus qu'aux
       intitulés vraiment longs. */
    .h-dash-line-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .h-dash-families .h-dash-next,
    .h-dash-family {
        width: min(361px, 82vw);
    }
    .h-dash-families .h-dash-next {
        min-height: 150px;
    }
}

/* Sous 576px, la légende de diversification n'a plus que ~133px à côté de l'anneau : « Crowdfunding
   immobilier » en réclame 160 et se coupait en « Crowdfunding imm... ». Elle passe donc sous
   l'anneau, sur toute la largeur de la carte, où les intitulés tiennent en entier. */
@media (max-width: 575.98px) {
    .h-dash-diversif-body {
        flex-direction: column;
        align-items: stretch;
    }
    .h-dash-donut {
        align-self: center;
    }
    .h-dash-diversif-label {
        white-space: normal;
    }
}

/* ----------------------------------------------------------------------------
   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-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;
}

/* ==========================================================================
   Simulateur de capacité d'investissement (/user/simulateur)
   Réf. Figma Dashboard/Simulateur. Page autonome : en-tête de tunnel réduit
   (h-funnel-header + h-kyc-header-inner), puis une colonne centrée. L'écran de
   saisie réutilise les composants de formulaire du tunnel (h-form,
   h-form-question, form-floating.h-with-icon-end) ; l'écran de résultat ajoute la
   mise en avant du montant et le carrousel d'opportunités.
   ========================================================================== */

/* Bouton de fermeture de l'en-tête. Même dessin que .h-kyc-menu-close, mais
   visible à toutes les tailles : le simulateur n'a pas de menu à replier. */
.h-sim-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-tertiary-color);
    transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.h-sim-close:hover,
.h-sim-close:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* Colonne de contenu, centrée et bornée. La largeur maximale suit le plus large
   des deux écrans : le carrousel de la page de résultat. */
.h-sim-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

@media (min-width: 992px) {
    .h-sim-shell {
        padding: 2.5rem 1.5rem 4rem;
    }
}

/* -- Écran de saisie ---------------------------------------------------- */

.h-sim-card {
    width: 100%;
    max-width: 34.1875rem;
    background-color: #FFFFFF;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .h-sim-card {
        padding: 2rem;
    }
}

.h-sim-title {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

@media (min-width: 576px) {
    .h-sim-title {
        font-size: 2rem;
    }
}

/* Sous-texte d'aide sous l'intitulé d'une question (exemples de revenus, de
   placements, de charges). Colle à la question, au-dessus du champ. */
.h-sim-question-hint {
    margin-top: -0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--bs-tertiary-color);
}

/* -- Écran de résultat -------------------------------------------------- */

.h-sim-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.h-sim-result-heading {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Montant mis en avant : chiffres en display, symbole monétaire plus petit. */
.h-sim-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

@media (min-width: 576px) {
    .h-sim-amount {
        font-size: 3.5rem;
    }
}

.h-sim-amount-currency {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* Renvoi vers la note de bas d'écran. La marge négative annule l'écart de la
   ligne : un appel de note se colle au montant qu'il commente. */
.h-sim-amount-mark {
    margin-left: -0.35rem;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--bs-tertiary-color);
}

/* Rappel du patrimoine net, en pastille bordée. */
.h-sim-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-body-color);
}

.h-sim-pill-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--bs-emphasis-color);
}

.h-sim-pill-value {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

/* -- Pied de page ------------------------------------------------------- */

.h-sim-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 30rem;
    text-align: center;
}

/* Les notes se suivent dans leur propre bloc : l'écart de la colonne ne joue
   ainsi qu'entre le bouton et les notes, pas entre deux notes. */
.h-sim-footnotes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h-sim-footnote {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--bs-body-color);
}

/* ============================================================================
   Page Fiscalité — balisage : templates/front/user/account/taxation.html.twig.

   Aucune maquette ne couvre cette page : elle assemble les composants du
   tableau de bord et du tunnel KYC. Ne sont définis ici que ce qui leur
   manquait — le rythme de l'en-tête, les panneaux de régime et la zone de
   dépôt de justificatif, qui n'existait nulle part dans le kit.
   ============================================================================ */

/* --- Rythme de l'en-tête --------------------------------------------------- */

/* Le bandeau d'état suit un en-tête de page : il prend l'écart que le design
   system met sous un titre de produit, et la carte qui le suit celui qu'il met
   sous une relance. Les deux règles sont de voisinage : sur le tableau de bord,
   le bandeau ouvre la page et ne doit rien gagner. */
.h-dash-producthead + .h-dash-alert {
    margin-top: 33px;
}

.h-dash-alert + .h-dash-card {
    margin-top: 40px;
}

/* Pastille d'état à droite du titre de page. */
.h-dash-producthead-pill {
    margin-left: auto;
}

/* --- Variantes du bandeau d'état ------------------------------------------ */

.h-dash-alert.is-success {
    background-color: var(--bs-success-bg-subtle);
}

.h-dash-alert.is-success .h-dash-alert-icon {
    background-color: var(--bs-success);
}

.h-dash-alert.is-danger {
    background-color: var(--bs-danger-bg-subtle);
}

.h-dash-alert.is-danger .h-dash-alert-icon {
    background-color: var(--bs-danger);
}

/* Aux couleurs de WhatsApp : l'encart renvoie vers la chaîne et doit se reconnaître d'un coup
   d'œil. La marge de droite garde la place de la croix. */
.h-dash-alert.is-whatsapp {
    gap: 24px;
    padding: 20px 64px 20px 24px;
    border-radius: 20px;
    background-color: #E8F5EC;
}

.h-dash-alert.is-whatsapp .h-dash-alert-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
    color: #0F7A40;
}

.h-dash-alert.is-whatsapp .h-dash-alert-icon svg {
    width: 24px;
    height: 24px;
}

.h-dash-alert.is-whatsapp .h-dash-alert-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.h-dash-alert.is-whatsapp .h-dash-alert-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.h-dash-alert.is-whatsapp .h-dash-alert-desc {
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* Croix de 44 px : zone de clic confortable, au mobile surtout. */
.h-dash-alert.is-whatsapp .h-dash-alert-close {
    width: 44px;
    height: 44px;
    color: var(--bs-emphasis-color);
}

/* Sous lg : l'encart passe en colonne, le bouton d'ouverture en pleine largeur sous le texte. */
@media (max-width: 991.98px) {
    .h-dash-alert.is-whatsapp {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }
    .h-dash-whatsapp-banner-main {
        align-items: flex-start;
        gap: 12px;
        padding-right: 36px;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-icon svg {
        width: 20px;
        height: 20px;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-text {
        gap: 4px;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-title {
        font-size: 1rem;
        line-height: 1.3;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-desc {
        font-size: 0.875rem;
        line-height: 1.4;
    }
    .h-dash-alert.is-whatsapp .h-dash-alert-close {
        top: 6px;
        right: 6px;
    }
}

/* Sur un bandeau déjà teinté, la pastille reprend le fond blanc du bouton :
   son fond « subtle » se confondrait avec celui du bandeau. */
.h-dash-alert-pill {
    margin-left: auto;
    background-color: #FFFFFF;
}

/* --- Choix du régime fiscal ----------------------------------------------- */

.h-dash-regimes {
    margin-top: 24px;
}

.h-dash-regime-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.h-dash-regime-desc {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--bs-tertiary-color);
}

/* Panneau du régime coché : le voisin masqué ne laisse aucun trait derrière lui. */
.h-dash-regime-panel {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--bs-border-color);
}

.h-dash-regime-title {
    margin: 0 0 12px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.h-dash-regime-body {
    max-width: 68ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--bs-body-color);
}

.h-dash-regime-advice {
    max-width: 68ch;
    margin-top: 20px;
}

.h-dash-regime-list {
    margin: 20px 0 0;
    font-size: 0.9375rem;
}

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

.h-dash-regime-actions {
    margin-top: 28px;
}

/* --- Étapes du dépôt d'un justificatif ------------------------------------ */

.h-dash-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    margin-top: 28px;
}

.h-dash-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.h-dash-step-label {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

/* Zone de dépôt : le champ de fichier vit dedans, invisible, le libellé entier
   servant de cible de clic. Le nom du fichier choisi remplace le titre. */
.h-dash-drop {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 24px;
    border: 1.5px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

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

.h-dash-drop:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* Fichier choisi : le contour se ferme et prend le ton du dépôt accepté. */
.h-dash-drop.is-filled {
    border-style: solid;
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
}

.h-dash-drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.h-dash-drop-icon svg {
    width: 22px;
    height: 22px;
}

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

.h-dash-drop-desc {
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-drop-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-top: 16px;
    padding: 0 18px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    line-height: 1;
}

.h-dash-drop-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.h-dash-drop-saved {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 0;
    font-size: 0.9375rem;
}

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

/* --- Prélèvements et justificatifs ---------------------------------------- */

.h-dash-withholding {
    margin-top: 24px;
}

/* Valeur textuelle d'une tuile : la chasse du display serait démesurée pour un mot. */
.h-dash-kpi-value-text {
    font-size: 1.5rem;
}

.h-dash-documents {
    margin-top: 20px;
}

.h-dash-document-link {
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

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

.h-dash-legal {
    margin-top: 25px;
}

@media (max-width: 767.98px) {
    /* Les deux étapes du dépôt s'empilent : la zone de dépôt a besoin de sa largeur. */
    .h-dash-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* ============================================================================
   Page Paramètres et menu de compte — balisage :
   templates/front/user/account/settings.html.twig et le layout du tableau de bord.
   ============================================================================ */

/* --- Zone de message du tableau de bord ----------------------------------- */

/* Les messages du contrôleur (flash) ouvrent la colonne de contenu. Le dernier
   d'une pile se détache du bloc qui suit comme le fait un bandeau de relance. */
.h-dash-flash + .h-dash-flash {
    margin-top: 12px;
}

.h-dash-flashes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

/* --- Notes de pied d'écran ------------------------------------------------ */

/* Mentions vers lesquelles pointent les renvois des taux affichés. Elles ferment
   la colonne de contenu, détachées du dernier bloc et en retrait de ton : on les
   lit quand on les cherche. */
/* La mention réglementaire se lit à la taille du texte courant : elle n'est pas une note de
   bas de page à déchiffrer, elle qualifie les taux affichés au-dessus. */
.h-dash-footnote {
    margin: 32px 0 0;
    font-size: var(--bs-body-font-size);
    line-height: 1.35;
    text-align: justify;
    color: var(--bs-tertiary-color);
}

.h-dash-footnote + .h-dash-footnote {
    margin-top: 8px;
}

/* --- Menu de compte de l'en-tête ------------------------------------------ */

/* Le déclencheur reprend la pastille de compte : seul le chevron change de sens,
   vers le bas au repos et vers le haut quand le menu est ouvert. */
.h-dash-account[aria-expanded] .h-dash-account-chevron {
    transform: rotate(90deg);
    transition: transform 0.15s ease-in-out;
}

.h-dash-account[aria-expanded="true"] .h-dash-account-chevron {
    transform: rotate(-90deg);
}

button.h-dash-account {
    border: 0;
    background-color: transparent;
    font: inherit;
    cursor: pointer;
}

.h-dash-accountmenu {
    min-width: 232px;
    padding: 8px;
    border: 0;
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(33, 33, 33, 0.14);
}

.h-dash-accountmenu .dropdown-item {
    padding: 10px 12px;
    border-radius: var(--bs-border-radius);
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
}

.h-dash-accountmenu .dropdown-item:hover,
.h-dash-accountmenu .dropdown-item:focus-visible {
    background-color: #EAEAEA;
    color: var(--bs-emphasis-color);
}

.h-dash-accountmenu .dropdown-item.is-current {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* Chaîne WhatsApp, présente sous lg seulement : teintée pour se détacher des réglages. */
.h-dash-accountmenu .dropdown-item.h-dash-accountmenu-whatsapp {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #EEF8F1;
}

.h-dash-accountmenu .dropdown-item.h-dash-accountmenu-whatsapp:hover,
.h-dash-accountmenu .dropdown-item.h-dash-accountmenu-whatsapp:focus-visible {
    background-color: #DDF0E3;
}

.h-dash-accountmenu-whatsapp svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: #0F7A40;
}

.h-dash-accountmenu-whatsapp-label {
    flex: 1 1 auto;
}

.h-dash-accountmenu-whatsapp .h-dash-accountmenu-whatsapp-arrow {
    flex-basis: 14px;
    width: 14px;
    height: 14px;
    color: var(--bs-secondary-color);
}

/* Quitter la session : la seule entrée qui sorte du parcours. */
.h-dash-accountmenu .dropdown-item.is-quit {
    color: var(--bs-danger);
}

.h-dash-accountmenu .dropdown-divider {
    margin: 8px 4px;
    border-top-color: var(--bs-border-color);
}

/* --- Formulaire de la page Paramètres ------------------------------------- */

.h-dash-cardintro {
    max-width: 68ch;
    margin: 12px 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--bs-body-color);
}

.h-dash-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 760px;
    margin-top: 24px;
}

.h-dash-fieldrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.h-dash-fieldhint {
    margin-top: 6px;
}

@media (max-width: 767.98px) {
    /* Les deux mots de passe s'empilent : côte à côte, les libellés flottants se tronquent. */
    .h-dash-fieldrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ============================================================================
   Page Portefeuille — balisage : templates/front/user/investment/wallet.html.twig
   et ses partiels sous wallet/.

   Le retrait est le morceau qui demande le plus au kit : une chaîne de vérification
   du compte bénéficiaire, un champ de montant borné par le solde et un
   récapitulatif avant un virement qui ne s'annule pas.
   ============================================================================ */

/* --- Solde ---------------------------------------------------------------- */

.h-dash-walletrow {
    display: grid;
    grid-template-columns: minmax(0, 360fr) minmax(0, 514fr);
    gap: 25px;
    margin-top: 33px;
}

.h-dash-walletrow .h-dash-card {
    margin-top: 0;
}

/* Le solde de la carte, à ne pas confondre avec la pastille `h-dash-balance` de l'en-tête :
   les deux ont porté le même nom, et la carte, définie après, imposait sa police de titre et
   ses 2,75 rem à une pastille haute de 48 px. */
.h-dash-balancecard-amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 0;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-emphasis-color);
}

.h-dash-balancecard-currency {
    font-size: 1.25rem;
    font-weight: 400;
}

.h-dash-balancecard-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

/* Le rappel du solde chez le prestataire est une action à part entière : elle se présente
   en bouton, et non en mot coloré perdu dans la ligne de date. */
.h-dash-balancecard-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.h-dash-balancecard-refresh:hover {
    border-color: var(--bs-emphasis-color);
    background-color: #F7F4EF;
    color: var(--bs-emphasis-color);
}

.h-dash-balancecard-refresh:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.h-dash-balancecard-refresh svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

/* --- Onglets et panneaux -------------------------------------------------- */

.h-dash-wallettabs {
    margin-bottom: 28px;
}

.h-dash-panel-title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

.h-dash-panel-actions {
    margin-top: 24px;
}

/* Les blocs du panneau se séparent d'un filet ; celui qui ouvre le panneau n'en porte pas.
   L'ordre dépend de l'état : le retrait passe en tête dès qu'il est possible. */
.h-dash-withdraw,
.h-dash-beneficiary,
.h-dash-withdrawals {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--bs-border-color);
}

.h-dash-withdraw:first-child,
.h-dash-beneficiary:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.h-dash-beneficiary-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.h-dash-beneficiary-advice {
    max-width: 68ch;
    margin-bottom: 4px;
}

.h-dash-fundrules {
    margin: 20px 0 24px;
    font-size: 0.9375rem;
}

.h-dash-lock {
    margin-top: 0;
}

/* --- Chaîne de vérification du compte bénéficiaire ------------------------ */

/* Trois étapes de front : le trait au-dessus porte l'avancement, la pastille son état. */
.h-dash-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

/* Portée limitée à la chaîne : la page Fiscalité emploie aussi .h-dash-step pour ses étapes de
   dépôt, qui héritaient sinon de cette grille à colonne de 26 px et y écrasaient leur libellé. */
.h-dash-stepper > .h-dash-step {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding-top: 14px;
    border-top: 3px solid var(--bs-border-color);
}

.h-dash-step.is-done {
    border-top-color: var(--bs-success);
}

.h-dash-step.is-current {
    border-top-color: var(--bs-primary);
}

.h-dash-step-dot {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #EAEAEA;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    line-height: 1;
}

.h-dash-step-dot svg {
    width: 15px;
    height: 15px;
}

.h-dash-step.is-done .h-dash-step-dot {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.h-dash-step.is-current .h-dash-step-dot {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.h-dash-step-name {
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.h-dash-step-meta {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--bs-tertiary-color);
}

/* --- Coordonnées bancaires ------------------------------------------------ */

.h-dash-ibancard {
    max-width: 520px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
}

.h-dash-ibanrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    font-size: 0.9375rem;
}

.h-dash-ibanrow + .h-dash-ibanrow {
    border-top: 1px solid var(--bs-body-bg);
}

.h-dash-ibanlabel {
    flex: 0 0 90px;
    color: var(--bs-tertiary-color);
}

.h-dash-ibanvalue {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    color: var(--bs-emphasis-color);
}

/* Copie d'un coordonnée bancaire. Le bouton tient la cible tactile de 44px sans élargir la
   rangée : son libellé s'efface sous 576px, l'icône suffit à l'annoncer. */
.h-dash-ibancopy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.h-dash-ibancopy:hover {
    border-color: var(--bs-emphasis-color);
}

.h-dash-ibancopy svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
}

/* Confirmation : le bouton prend le ton du succès le temps du message. */
.h-dash-ibancopy.h-dash-copied {
    border-color: var(--bs-success);
    color: var(--bs-success);
}

/* Suites lues chiffre à chiffre : chasse tabulaire et respiration. */
.is-mono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* Un IBAN se lit d'une traite : un corps plus petit et sans espacement, ses groupes de quatre
   suffisant à le faire respirer, pour tenir sur une ligne à côté du bouton de copie. */
.h-dash-ibanvalue.is-iban {
    font-size: 0.875rem;
    letter-spacing: 0;
}

/* --- Montant du retrait --------------------------------------------------- */

.h-dash-amountrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.h-dash-amountfield {
    position: relative;
    flex: 0 0 260px;
}

.h-dash-amountinput {
    padding-right: 42px;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    /* Les flèches natives du champ nombre encombrent un montant. */
    appearance: textfield;
}

.h-dash-amountinput::-webkit-outer-spin-button,
.h-dash-amountinput::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* Le champ porte déjà son symbole à droite : l'icône d'erreur de Bootstrap s'y superposerait. */
.h-dash-amountinput.is-invalid {
    background-image: none;
}

.h-dash-amountcur {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-quickamounts {
    display: flex;
    gap: 8px;
}

.h-dash-quick {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    cursor: pointer;
}

.h-dash-quick:hover {
    border-color: var(--bs-emphasis-color);
}

.h-dash-quick.is-active {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.h-dash-amountfeedback,
.h-dash-amounthint {
    margin-top: 10px;
}

/* --- Récapitulatif avant virement ---------------------------------------- */

.h-dash-recap {
    max-width: 520px;
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.h-dash-recap-title {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

.h-dash-recap-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
}

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

.h-dash-recap-row.is-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color);
}

/* --- Historique des mouvements ------------------------------------------- */

.h-dash-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.h-dash-movement {
    display: block;
    color: var(--bs-emphasis-color);
}

.h-dash-movement-detail {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--bs-tertiary-color);
}

.h-dash-movement-amount.is-in {
    color: var(--bs-success);
}

.h-dash-movement-amount.is-out {
    color: var(--bs-emphasis-color);
}

.h-dash-withdrawals-note,
.h-dash-pagination {
    margin-top: 16px;
}

@media (max-width: 991.98px) {
    /* Le solde et son explication s'empilent, et les étapes passent en liste. */
    .h-dash-walletrow {
        grid-template-columns: minmax(0, 1fr);
    }
    .h-dash-stepper {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    /* En liste, le trait d'avancement se lirait comme un séparateur : l'état ne tient
       plus qu'à la pastille. */
    .h-dash-stepper > .h-dash-step {
        padding-top: 0;
        border-top: 0;
    }
}

/* --- Pagination du tableau de bord ---------------------------------------- */

/* Balisage : templates/front/user/dashboard/partials/_pagination.html.twig. */
.h-dash-pagi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Le pager des tableaux de portefeuille s'efface dès qu'il n'y a qu'une page : sans cette règle,
   son `display: flex` primerait sur l'attribut `hidden`. */
.h-dash-pagi[hidden] {
    display: none;
}

.h-dash-tablewrap + .h-dash-pagi {
    margin-top: 16px;
}

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

.h-dash-pagi-list {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-dash-pagi-page,
.h-dash-pagi-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.h-dash-pagi-page:hover,
.h-dash-pagi-step:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

.h-dash-pagi-page.is-current {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* Dernière page : détachée de la plage courante, elle en est séparée d'un souffle. */
.h-dash-pagi-last {
    margin-left: 10px;
}

.h-dash-pagi-step svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   VOLET LATÉRAL DU TABLEAU DE BORD
   Réf. RefonteDashboard « Dashboard Field 11 ».

   Un détail qui ne mérite pas sa page : l'historique des versements d'une ligne, les documents
   d'un investissement. Le volet glisse depuis la droite par-dessus la page, qui reste visible
   derrière un voile — l'investisseur n'a pas quitté son tableau.
   ========================================================================= */

.h-dash-drawer {
    position: fixed;
    inset: 0;
    z-index: 1080;
}

/* Le volet ouvert, la page ne défile plus derrière lui : la molette agit dans le volet. */
.h-dash-drawer-locked,
.h-dash-locked {
    overflow: hidden;
}

/* Voile : la page reste lisible dessous, juste assez éteinte pour passer au second plan. */
.h-dash-drawer-veil {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.h-dash-drawer-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    width: min(750px, calc(100% - 32px));
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    transform: translateX(calc(100% + 16px));
    transition: transform 0.28s ease;
}

.h-dash-drawer.is-open .h-dash-drawer-veil {
    opacity: 1;
}

.h-dash-drawer.is-open .h-dash-drawer-panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .h-dash-drawer-veil,
    .h-dash-drawer-panel {
        transition: none;
    }
}

/* --- En-tête du volet ----------------------------------------------------- */

.h-dash-drawer-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 80px;
    padding: 0 24px;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-dash-drawer-label {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

.h-dash-drawer-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #E1DDD4;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

.h-dash-drawer-close:hover {
    border-color: var(--bs-emphasis-color);
}

.h-dash-drawer-close svg {
    width: 18px;
    height: 18px;
}

/* --- Corps du volet ------------------------------------------------------- */

/* Le corps défile seul : l'en-tête et son bouton de fermeture restent atteignables quel que
   soit le nombre de versements. */
.h-dash-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px 24px;
}

/* Nom du projet en linéale, comme le titre de la page de portefeuille : le serif des titres
   ferait de ce volet un document, alors qu'il prolonge une ligne de tableau. */
.h-dash-drawer-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.h-dash-drawer-meta {
    margin: 18px 0 0;
    line-height: 1.25;
    color: var(--bs-emphasis-color);
}

.h-dash-drawer-note {
    margin: 6px 0 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--bs-tertiary-color);
}

/* Barre d'avancement du volet : plus haute que celle des tableaux, elle est ici le sujet.
   Sa piste emprunte la couleur des filets — celle des jauges de ligne, bleutée, jurerait
   sur le blanc du volet. */
.h-dash-drawer-gauge {
    display: block;
    overflow: hidden;
    height: 16px;
    margin-top: 8px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-border-color);
}

.h-dash-drawer-gauge-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background-color: var(--bs-progress-fill);
}

/* Tableau du volet : plus resserré que celui d'un portefeuille, et sans filets. Les versements
   d'une même ligne se lisent d'un bloc — les séparer les ferait paraître indépendants. */
.h-dash-drawer-table {
    margin-top: 30px;
}

.h-dash-drawer-table .h-dash-table {
    margin-top: 0;
}

.h-dash-drawer-table .h-dash-table thead th {
    padding: 10px 16px;
    line-height: 20px;
}

.h-dash-drawer-table .h-dash-table tbody th,
.h-dash-drawer-table .h-dash-table tbody td {
    border-bottom: 0;
}

/* Message de chargement et d'échec : le volet s'ouvre avant que sa réponse n'arrive. */
.h-dash-drawer-wait {
    margin: 0;
    padding: 24px 0;
    color: var(--bs-tertiary-color);
}

/* --- Liste de documents --------------------------------------------------- */

/* Les pièces d'un investissement : contrat signé, certificats. Une liste plutôt qu'un tableau —
   il n'y a jamais qu'une poignée de lignes, et chacune se lit d'un bloc : ce qu'est le document,
   de quand il date, comment l'obtenir. */
.h-dash-doclist {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

/* Posée directement sous un tableau qu'elle certifie, la liste s'y rattache d'un filet plutôt que
   de flotter derrière un intitulé de section. */
.h-dash-doclist.is-attached {
    margin-top: 8px;
    border-top: 1px solid var(--bs-border-color);
}

.h-dash-docrow {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-dash-docrow:last-child {
    border-bottom: 0;
}

.h-dash-docicon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-tertiary-color);
}

.h-dash-docicon svg {
    width: 20px;
    height: 20px;
}

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

.h-dash-docname {
    display: block;
    color: var(--bs-emphasis-color);
}

.h-dash-doccaption {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

.h-dash-docget {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    text-decoration: none;
}

.h-dash-docget:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

.h-dash-docget svg {
    width: 16px;
    height: 16px;
}

/* Plusieurs pièces pour une même ligne de tableau : les boutons se suivent sans se toucher et
   passent à la ligne quand la colonne se resserre. */
.h-dash-docgets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* --- Intitulé de bloc et renvoi dans un volet ----------------------------- */

/* Nom du projet et pastille de statut sur une même ligne, la pastille poussée à droite. */
.h-dash-drawer-headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.h-dash-drawer-section {
    margin: 32px 0 0;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

/* Titre d'un bloc répété dans un volet — un projet, une souscription. À la différence de
   `h-dash-drawer-section`, il porte un nom propre : il ne se met pas en capitales. */
.h-dash-drawer-subtitle {
    margin: 32px 0 0;
    font-size: 1rem;
    color: var(--bs-emphasis-color);
}

/* Renvoi vers l'autre volet : une pièce se trouve ailleurs, il faut le dire là où on la cherche. */
/* Notes de bas de volet, mention réglementaire comprise : à la taille du texte du volet,
   comme la mention de bas de page. */
.h-dash-drawer-aside {
    margin: 14px 0 0;
    font-size: var(--bs-body-font-size);
    line-height: 1.5;
    color: var(--bs-tertiary-color);
}

/* --- Indicateurs d'un volet de SCPI --------------------------------------- */

/* Ce que la société annonce, en paires libellé/valeur. Une SCPI n'a ni échéance ni
   avancement : le volet ne peut montrer qu'une liste de faits, que deux colonnes
   tiennent au large et une seule sur téléphone. */
.h-dash-drawer-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 16px 0 0;
}

.h-dash-drawer-fact dt {
    margin-bottom: 4px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-tertiary-color);
}

.h-dash-drawer-fact dd {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

@media (max-width: 575.98px) {
    .h-dash-drawer-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

.h-dash-drawer-out {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: var(--bs-primary);
    font-size: 0.9375rem;
    text-decoration: none;
}

.h-dash-drawer-out svg {
    width: 16px;
    height: 16px;
}

/* --- Nature d'un versement ------------------------------------------------ */

/* Distincte des pastilles de statut : ce n'est pas un état qui progresse mais la nature de
   l'échéance, d'où le filet qui la cerne. */
.h-dash-typepill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Annuité : un intérêt annuel, le capital reste dû. */
.h-dash-typepill.is-annuity {
    border-color: #E3C2BD;
    background-color: var(--bs-danger-bg-subtle);
    color: #7C463C;
}

/* Versement partiel : une part du capital revient avant le terme. */
.h-dash-typepill.is-partial {
    border-color: #E7D7B6;
    background-color: #F6ECE0;
    color: #7B6031;
}

/* Solde : capital et intérêts rendus, la ligne est close. */
.h-dash-typepill.is-final {
    border-color: #BFD6C7;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

/* Rétractation : l'investissement est défait, sans gain ni perte. */
.h-dash-typepill.is-neutral {
    border-color: var(--bs-border-color);
    background-color: #EEE9E3;
    color: var(--bs-tertiary-color);
}

/* --- Ligne de tableau qui ouvre un volet ---------------------------------- */

.h-dash-table tbody tr[data-drawer-open] {
    cursor: pointer;
}

.h-dash-table tbody tr[data-drawer-open]:hover {
    background-color: var(--bs-body-bg);
}

/* La colonne figée est opaque : sans ce rappel, le survol s'arrêterait à son bord. */
.h-dash-table tbody tr[data-drawer-open]:hover th:first-child {
    background-color: var(--bs-body-bg);
}

/* --- Volet sur téléphone -------------------------------------------------- */

/* Plein écran : un volet de 750 px n'a pas de place, et le voile ne servirait qu'à rogner
   le peu de largeur restante. */
@media (max-width: 767.98px) {
    .h-dash-drawer-panel {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-radius: 0;
        transform: translateX(100%);
    }

    .h-dash-drawer-head {
        height: 64px;
        padding: 0 16px;
    }

    .h-dash-drawer-close {
        width: 40px;
        height: 40px;
    }

    .h-dash-drawer-body {
        padding: 16px 16px 24px;
    }

    /* Le bouton ne tient pas à côté d'un nom de document : il passe dessous, aligné sur le
       texte plutôt que sur l'icône. Une grille plutôt qu'un renvoi à la ligne — en flex, une
       précision un peu longue poussait le nom sous l'icône, qui restait seule sur sa ligne. */
    .h-dash-docrow {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px 16px;
        align-items: center;
    }

    .h-dash-docget {
        grid-column: 2;
        justify-self: start;
    }
}

/* ============================================================================
   PARRAINAGE
   Aucune maquette ne couvre cette page : elle reprend les composants du tableau de bord
   (proposition validée le 2026-09-03). Trois graphiques la complètent, dessinés en CSS —
   aucune bibliothèque à charger, rien à redessiner au redimensionnement.
   ========================================================================= */

/* Le préfixe est `h-dash-graph` et non `h-dash-chart` : celui-ci désigne déjà l'axe des douze
   mois du bloc « Prochains versements », qui porte une marge haute de 152 px. */

/* Quatre teintes pour la progression d'un filleul, prises au nuancier : de l'or pâle de
   l'inscription au vert profond de l'investissement. */
.h-dash-spons {
    --h-step-start:  #E0CBA8;
    --h-step-middle: #BE9054;
    --h-step-end:    #0E5A38;
    --h-step-soft:   #9BC0A5;
}

/* --- Lien, code et partage ------------------------------------------------ */

/* Le lien et son code QR : côte à côte en grand, le code au-dessus sur téléphone. */
.h-dash-sharegrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 28px;
    align-items: start;
    margin-top: 24px;
}

.h-dash-qr {
    display: flex;
    flex-direction: column;
    order: 1;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.h-dash-qr-code {
    width: 152px;
    height: 152px;
    padding: 8px;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.h-dash-qr-caption {
    font-size: 0.8125rem;
    text-align: center;
    color: var(--bs-tertiary-color);
}

.h-dash-linkrow {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Le lien est donné à lire et à copier, non à modifier : un champ en lecture seule plutôt
   qu'une saisie, pour qu'on ne croie pas pouvoir le changer. */
.h-dash-linkfield {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h-dash-sharelabel {
    margin: 24px 0 10px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

.h-dash-shares {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h-dash-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    text-decoration: none;
}

.h-dash-share:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

.h-dash-share svg {
    width: 17px;
    height: 17px;
}

/* Confirmation de copie : elle remplace le libellé du bouton le temps d'un instant, plutôt
   que d'ouvrir une bulle qui masquerait le lien qu'on vient de copier. */
.h-dash-copied {
    color: var(--bs-success);
}

/* --- Graphiques ---------------------------------------------------------- */

.h-dash-graphs {
    display: grid;
    grid-template-columns: minmax(0, 420fr) minmax(0, 420fr) minmax(0, 260fr);
    gap: 24px;
    margin-top: 24px;
}

.h-dash-graph {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
}

.h-dash-graph-title {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--bs-emphasis-color);
}

.h-dash-graph-note {
    margin: 0 0 20px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-graph-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: auto 0 0;
    padding-top: 18px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-graph-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.h-dash-graph-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--h-dot);
}

/* Entonnoir : la largeur de chaque barre est sa part du premier étage, et le taux de passage
   s'écrit entre deux étages — c'est lui qui dit où l'on perd les filleuls. */
.h-dash-funnel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-dash-funnel-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.h-dash-funnel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}

.h-dash-funnel-value {
    font-variant-numeric: tabular-nums;
}

.h-dash-funnel-bar {
    display: block;
    width: var(--h-part);
    min-width: 3px;
    height: 22px;
    border-radius: 4px;
    background-color: var(--h-step-start);
}

.h-dash-funnel-bar.is-middle {
    background-color: var(--h-step-middle);
}

.h-dash-funnel-bar.is-end {
    background-color: var(--h-step-end);
}

.h-dash-funnel-drop {
    padding: 3px 0 9px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-funnel-step:last-child .h-dash-funnel-drop {
    padding-bottom: 0;
}

/* Histogramme : la hauteur totale compte les inscrits du mois, la part foncée ceux qui ont
   investi — le volume et sa qualité se lisent d'un même coup d'œil. */
.h-dash-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 168px;
}

.h-dash-barcol {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
}

.h-dash-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: var(--h-height);
    min-height: 3px;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--h-step-start);
}

.h-dash-bar.is-empty {
    background-color: var(--bs-border-color);
}

.h-dash-bar-in {
    display: block;
    height: var(--h-share);
    background-color: var(--h-step-soft);
}

.h-dash-barlabel {
    flex: 0 0 auto;
    font-size: 0.75rem;
    text-align: center;
    color: var(--bs-tertiary-color);
}

/* Anneau de conversion : même technique que la Diversification du tableau de bord. */
.h-dash-ring {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 168px;
    height: 168px;
    margin: 0 auto;
    border-radius: 50%;
}

.h-dash-ring::after {
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background-color: #FFFFFF;
    content: '';
}

.h-dash-ring-value {
    position: relative;
    z-index: 1;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.h-dash-ring-caption {
    position: absolute;
    top: 96px;
    z-index: 1;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* --- Étape d'un filleul --------------------------------------------------- */

.h-dash-stepchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 12px 0 10px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-body-bg);
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

.h-dash-stepchip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--h-step-start);
}

.h-dash-stepchip.is-middle .h-dash-stepchip-dot {
    background-color: var(--h-step-middle);
}

.h-dash-stepchip.is-end .h-dash-stepchip-dot {
    background-color: var(--h-step-end);
}

/* Identité d'un client dans la liste d'un conseiller : le nom porte la ligne, l'adresse la situe. */
.h-dash-clientname {
    display: block;
    color: var(--bs-emphasis-color);
}

.h-dash-clientmail {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

/* --- Action et mention d'une ligne de tableau ----------------------------- */

.h-dash-rowaction {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
}

.h-dash-rowaction:hover {
    border-color: var(--bs-emphasis-color);
}

.h-dash-rowaction svg {
    width: 15px;
    height: 15px;
}

.h-dash-rowmuted {
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

/* --- Comment ça marche ---------------------------------------------------- */

.h-dash-steps3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.h-dash-step3 {
    padding: 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.h-dash-step3-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
    font-size: 0.875rem;
}

.h-dash-step3-title {
    margin: 14px 0 6px;
    font-size: 1rem;
    color: var(--bs-emphasis-color);
}

.h-dash-step3-desc {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--bs-tertiary-color);
}

.h-dash-prize {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

/* --- Parrainage sur téléphone --------------------------------------------- */

@media (max-width: 991.98px) {
    .h-dash-graphs {
        grid-template-columns: minmax(0, 1fr);
    }
    .h-dash-steps3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .h-dash-sharegrid {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Montrer son écran est ici le geste le plus naturel : le code passe devant le lien. */
    .h-dash-qr {
        order: -1;
    }
}

@media (max-width: 575.98px) {
    .h-dash-steps3 {
        grid-template-columns: minmax(0, 1fr);
    }
    /* Le lien occupe la largeur, le bouton passe dessous : côte à côte, il ne resterait du
       lien que son protocole. */
    .h-dash-linkrow {
        flex-wrap: wrap;
    }
    .h-dash-linkfield {
        flex: 1 1 100%;
    }
    .h-dash-linkrow .h-dash-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================================
   NOTIFICATIONS
   Aucune maquette ne couvre cette page : elle reprend les composants du tableau de bord
   (proposition validée le 2026-09-03).
   ========================================================================= */

.h-dash-notiftools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.h-dash-notiftools .h-dash-subfilters {
    margin-top: 0;
}

.h-dash-notifgroup {
    margin-top: 28px;
}

.h-dash-notifdate {
    margin: 0 0 4px;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
}

.h-dash-notiflist {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* La ligne est un bouton : elle ouvre un volet, elle ne mène pas à une adresse. */
.h-dash-notif {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.h-dash-notiflist li:last-child .h-dash-notif {
    border-bottom: 0;
}

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

/* La pastille tient sa gouttière même une fois la notification lue : sans cela, la ligne se
   décalerait à la lecture. */
.h-dash-notifdot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 16px;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.h-dash-notifdot.is-read {
    background-color: transparent;
}

.h-dash-notificon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-tertiary-color);
}

.h-dash-notificon svg {
    width: 20px;
    height: 20px;
}

.h-dash-notificon.is-small {
    width: 28px;
    height: 28px;
}

.h-dash-notificon.is-small svg {
    width: 16px;
    height: 16px;
}

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

.h-dash-notifhead {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

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

.h-dash-notifwhen {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
    white-space: nowrap;
}

.h-dash-notiftext {
    display: block;
    margin-top: 3px;
    line-height: 1.45;
    color: var(--bs-emphasis-color);
}

.h-dash-notif.is-unread .h-dash-notiftext {
    font-weight: 500;
}

/* --- Corps d'une notification dans le volet ------------------------------- */

/* Compteur des non-lues dans le menu de compte : la pastille de l'avatar dit qu'il y en a, ce
   chiffre dit combien. */
.h-dash-accountmenu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 0.75rem;
    line-height: 1;
}

.h-dash-readmeta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

.h-dash-readbody {
    margin: 24px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--bs-border-color);
    line-height: 1.6;
    color: var(--bs-body-color);
}

.h-dash-readbody p {
    margin: 0 0 14px;
}

.h-dash-readbody a {
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    /* La date passe sous la catégorie : côte à côte, l'aperçu n'aurait plus de place. */
    .h-dash-notifhead {
        flex-direction: column;
        gap: 2px;
    }
    .h-dash-notifwhen {
        margin-left: 0;
    }
    .h-dash-notiftools .h-dash-tool {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   ÉCRAN CENTRÉ ET SAISIE D'UN CODE
   Aucune maquette ne couvre la vérification du RIB : elle reprend les composants du tableau de
   bord (proposition validée le 2026-09-03). L'écran garde la barre latérale — c'est une
   confirmation, pas un tunnel dont il faudrait empêcher la sortie.
   ========================================================================= */

.h-dash-focus {
    display: flex;
    justify-content: center;
    padding-top: 33px;
}

.h-dash-focuscard {
    flex: 0 0 auto;
    width: 560px;
    max-width: 100%;
    padding: 40px;
    border-radius: var(--bs-border-radius-xl);
    background-color: #FFFFFF;
}

.h-dash-focusmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
}

.h-dash-focusmark svg {
    width: 24px;
    height: 24px;
}

.h-dash-focustitle {
    margin: 20px 0 0;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.h-dash-focuslede {
    max-width: 46ch;
    margin: 10px 0 0;
    line-height: 1.6;
    color: var(--bs-body-color);
}

/* Pied de carte : ce que l'on confirme, rappelé sous l'action. */
.h-dash-focusfoot {
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

.h-dash-focusrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    color: var(--bs-emphasis-color);
}

/* --- Saisie d'un code reçu par e-mail ------------------------------------- */

/* Un champ unique plutôt que quatre cases : le collage y fonctionne, et la saisie automatique du
   code reçu par e-mail — `autocomplete="one-time-code"` — n'y est pas brouillée. */
.h-dash-codeinput {
    width: 100%;
    height: 72px;
    margin-top: 28px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-family: inherit;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.6em;
    text-align: center;
    /* L'interlettrage pousse le texte à gauche : on le recentre d'autant. */
    text-indent: 0.6em;
}

.h-dash-codeinput:focus {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px var(--bs-primary-bg-subtle);
}

.h-dash-codeinput.is-invalid {
    border-color: var(--bs-danger);
}

.h-dash-codefeedback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 0.875rem;
    color: var(--bs-danger);
}

.h-dash-codefeedback svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

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

.h-dash-codeactions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

/* Action secondaire qui poste un formulaire : elle a le poids d'un lien, pas d'un bouton. */
.h-dash-linkbutton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
}

.h-dash-linkbutton[disabled] {
    color: var(--bs-tertiary-color);
    text-decoration: none;
}

@media (max-width: 575.98px) {
    .h-dash-focuscard {
        padding: 24px;
    }
    .h-dash-codeinput {
        height: 60px;
        font-size: 1.625rem;
    }
    /* Le bouton prend la largeur, le renvoi passe dessous. */
    .h-dash-codeactions {
        flex-wrap: wrap;
    }
    .h-dash-codeactions .h-dash-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================================
   FRISE CHRONOLOGIQUE
   Suivi d'un projet : les rapports d'avancement publiés par le promoteur, du plus récent au plus
   ancien (proposition validée le 2026-09-04). Aucune maquette ne couvre cette page.
   ========================================================================= */

/* --- Repères du projet ---------------------------------------------------- */

.h-dash-projfacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 14px 0 0;
    font-size: 0.9375rem;
    color: var(--bs-tertiary-color);
}

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

/* --- Intertitre d'année --------------------------------------------------- */

.h-dash-year {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 36px 0 4px;
}

.h-dash-year-label {
    flex: 0 0 auto;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.h-dash-year-rule {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color);
}

.h-dash-year-count {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* Sur écran étroit, une année tient rarement dans une hauteur d'écran : son en-tête reste en
   tête pendant qu'on parcourt ses rapports, sinon le repère disparaît dès le deuxième. Les
   en-têtes se relaient, celui de l'année suivante venant recouvrir le précédent. Le fond opaque
   et le débord jusqu'aux bords de l'écran empêchent les cartes de se voir passer dessous. */
@media (max-width: 991.98px) {
    .h-dash-year {
        position: sticky;
        top: 0;
        z-index: 3;
        margin-inline: -16px;
        padding: 8px 16px;
        background-color: var(--bs-body-bg);
    }
}

/* --- Frise ---------------------------------------------------------------- */

.h-dash-time {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Chaque entrée porte son propre segment de rail : la frise reste continue sans qu'un
   pseudo-élément de la liste ait à en calculer la hauteur. */
.h-dash-entry {
    display: grid;
    position: relative;
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 0 20px;
    padding: 20px 0;
}

.h-dash-entry::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    width: 1px;
    background-color: var(--bs-border-color);
    content: '';
}

.h-dash-entry:first-child::before {
    top: 26px;
}

.h-dash-entry:last-child::before {
    bottom: auto;
    height: 26px;
}

.h-dash-timedot {
    position: relative;
    z-index: 1;
    align-self: start;
    width: 13px;
    height: 13px;
    margin-top: 20px;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background-color: var(--bs-progress-fill);
}

/* Étape encore à venir : la pastille s'éteint et la carte n'est plus qu'un contour. */
.h-dash-timedot.is-soon {
    background-color: var(--bs-border-color);
}

.h-dash-entrycard {
    padding: 20px 24px;
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
}

.h-dash-entrycard.is-soon {
    background-color: transparent;
    outline: 1px dashed var(--bs-border-color);
    outline-offset: -1px;
}

.h-dash-when {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

.h-dash-entry-title {
    margin: 4px 0 0;
    font-size: 1.0625rem;
    color: var(--bs-emphasis-color);
}

.h-dash-entry-body {
    margin: 12px 0 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--bs-body-color);
}

.h-dash-entry-body p {
    margin: 0 0 12px;
}

.h-dash-entry-body p:last-child {
    margin-bottom: 0;
}

.h-dash-entry-body a {
    color: var(--bs-primary);
}

/* Repliée, l'entrée n'en montre que trois lignes : un projet à quarante-cinq rapports produirait
   sinon une page de soixante mille caractères. */
.h-dash-entry-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h-dash-more {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: underline;
}

/* --- Clichés de chantier -------------------------------------------------- */

.h-dash-shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.h-dash-shot {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

/* Le cliché est posé en fond plutôt qu'en `img` : un fichier manquant laisse alors la vignette
   à sa teinte, là où une image cassée étalerait son texte de remplacement hors du cadre. */
.h-dash-shot {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.h-dash-shot-title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    color: #FFFFFF;
    font-size: 0.75rem;
    line-height: 1.3;
}

/* --- Navigation en pied de volet ----------------------------------------- */

.h-dash-drawernav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--bs-border-color);
}

/* La mention réglementaire ferme le volet, sous la barre d'actions : elle s'en écarte plus
   que les notes du corps, qu'un simple interligne suffit à détacher. */
.h-dash-drawernav + .h-dash-drawer-aside {
    margin-top: 20px;
}

@media (max-width: 575.98px) {
    .h-dash-entry {
        gap: 0 14px;
    }
    .h-dash-entrycard {
        padding: 16px;
    }
    .h-dash-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Les deux destinations du volet prennent la largeur, l'une sous l'autre. */
    .h-dash-drawernav .h-dash-action {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- Visionneuse d'un cliché de chantier ---------------------------------- */

/* Un cliché de chantier se regarde en grand : la vignette est trop petite pour juger d'un enduit
   ou d'une charpente. La visionneuse tient l'écran entier, sans rien d'autre.
   `position: fixed; inset: 0` plutôt qu'une hauteur en `vh` : sur téléphone, la barre d'adresse
   fait varier `100vh` et l'image se retrouvait rognée au défilement. */
.h-dash-lightbox {
    display: flex;
    position: fixed;
    z-index: 1090;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 88px;
    background-color: rgba(17, 17, 17, 0.92);
}

.h-dash-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--bs-border-radius);
    object-fit: contain;
}

.h-dash-lightbox-caption {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    text-align: center;
}

.h-dash-lightbox-count {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* Les commandes gardent une cible de 44 px : c'est la taille d'un pouce. */
.h-dash-lightbox-btn {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

.h-dash-lightbox-btn:hover {
    background-color: rgba(255, 255, 255, 0.26);
}

.h-dash-lightbox-btn svg {
    width: 22px;
    height: 22px;
}

.h-dash-lightbox-close {
    top: 16px;
    right: 16px;
}

.h-dash-lightbox-prev {
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
}

.h-dash-lightbox-next {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.h-dash-lightbox-btn[hidden] {
    display: none;
}

/* Sur téléphone, les flèches quittent les bords de l'image — le pouce y masquerait ce qu'on
   regarde — pour se poser au bas de l'écran, à portée. Le glissement latéral fait le reste. */
@media (max-width: 767.98px) {
    .h-dash-lightbox {
        padding: 60px 12px 104px;
    }
    .h-dash-lightbox-caption {
        bottom: 68px;
    }
    .h-dash-lightbox-prev,
    .h-dash-lightbox-next {
        top: auto;
        bottom: 12px;
        transform: none;
    }
    .h-dash-lightbox-prev {
        left: 24px;
    }
    .h-dash-lightbox-next {
        right: 24px;
    }
}

/* La vignette annonce qu'elle s'agrandit. */
.h-dash-shot {
    cursor: zoom-in;
}

/* --- Adaptations mobiles des pages sans maquette -------------------------- */

@media (max-width: 767.98px) {
    /* Le montant occupe la largeur : sa chasse fixe laissait un vide à droite. */
    .h-dash-amountfield {
        flex: 1 1 100%;
    }
    .h-dash-quickamounts {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    /* En-tête de section : l'action passe sous le titre plutôt que de le comprimer
       sur deux lignes. Les liens de section du tableau de bord, réduits à leur
       chevron, tiennent de toute façon sur la même ligne. */
    .h-dash-section-head,
    .h-dash-history-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Un couple intitulé/valeur ne tient pas sur une ligne de téléphone dès que la
       valeur s'allonge — un IBAN, une phrase de délai : la valeur passe dessous. */
    .h-dash-recap-row,
    .h-dash-ibanrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .h-dash-ibanlabel {
        flex: 0 0 auto;
    }

    /* Rangée copiable : l'intitulé et la valeur s'empilent comme les autres, mais le bouton
       reste à leur droite plutôt que de s'ajouter en troisième ligne — il enjambe les deux. */
    .h-dash-ibanrow.is-copyable {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label copy"
            "value copy";
        align-items: center;
        column-gap: 12px;
    }
    .h-dash-ibanrow.is-copyable .h-dash-ibanlabel {
        grid-area: label;
    }
    .h-dash-ibanrow.is-copyable .h-dash-ibanvalue {
        grid-area: value;
    }
    .h-dash-ibancopy {
        grid-area: copy;
        min-width: 44px;
        padding: 0 10px;
    }
    /* L'icône porte seule le sens : le libellé mangerait la largeur de l'IBAN. Il reparaît le
       temps de la confirmation, à la place de l'icône — sans quoi le geste resterait sans réponse
       visible, le script n'écrivant « Copié » que dans ce libellé. */
    .h-dash-ibancopy-label {
        display: none;
    }
    .h-dash-ibancopy.h-dash-copied .h-dash-ibancopy-label {
        display: inline;
    }
    .h-dash-ibancopy.h-dash-copied svg {
        display: none;
    }
    /* La date de dernière mise à jour passe sur deux lignes et venait buter contre le bouton :
       les deux s'empilent. */
    .h-dash-balancecard-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Action principale d'un panneau : pleine largeur, comme les boutons du tunnel. */
    .h-dash-panel-actions .h-dash-action,
    .h-dash-regime-actions .h-dash-action {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* Tableau empilé : chaque ligne devient un bloc dont les cellules portent leur
       intitulé. Un tableau de trois colonnes qui défile ne montre que la première
       sur un téléphone, et rien n'annonce qu'il en cache d'autres. Les tableaux des
       portefeuilles produit, eux, gardent le défilement de leur maquette. La largeur
       plancher de 700 px, qui force ce défilement, ne vaut donc plus ici. */
    .h-dash-table.is-stacked,
    .h-dash-table.is-stacked tbody {
        display: block;
        min-width: 0;
    }

    .h-dash-table.is-stacked thead {
        display: none;
    }

    .h-dash-table.is-stacked tbody tr {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--bs-body-bg);
    }

    .h-dash-table.is-stacked tbody tr:last-child {
        border-bottom: 0;
    }

    .h-dash-table.is-stacked tbody th,
    .h-dash-table.is-stacked tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        width: auto;
        padding: 3px 0;
        border: 0;
        text-align: left;
    }

    .h-dash-table.is-stacked tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--bs-tertiary-color);
        font-size: 0.8125rem;
    }

    /* La première cellule porte le nom de la ligne : elle ouvre le bloc, sans intitulé. */
    .h-dash-table.is-stacked tbody th {
        margin-bottom: 4px;
        font-size: 1rem;
    }

    /* La colonne figée des tableaux de portefeuille n'a plus d'objet une fois les lignes
       empilées : son fond et sa largeur plancher découpaient un bloc gris dans la ligne. */
    .h-dash-table.is-stacked tbody th:first-child {
        position: static;
        min-width: 0;
        max-width: none;
        background-color: transparent;
        box-shadow: none;
    }
}

/* --- Catalogue des projets ------------------------------------------------ */

/* Balisage : templates/front/user/project/index.html.twig. La carte de projet est celle du
   tableau de bord (homunity.project-card.css) : cette section ne pose que la tête de page, ses deux
   commandes et la grille qui les suit. Le volet qu'ouvre « Filtres » a la sienne, plus bas. */

.h-dash-pagehead-title {
    margin: 0;
    font-size: 2.125rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Tête de page du catalogue : le titre garde sa gauche, les deux commandes prennent la
   droite, posées sur la ligne de base du titre. */
.h-dash-pagehead-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.h-dash-pagehead-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Commande de tête : la même pilule pour « Filtres » et pour le tri, l'un porté par un lien,
   l'autre par un bouton — d'où le soulignement à éteindre. */
.h-dash-headbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.h-dash-headbtn:hover {
    border-color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.h-dash-headbtn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.h-sort-btn {
    padding: 0;
    width: 40px;
}

/* Menu de tri : ancré sous son bouton, il ne pousse rien dans la page. */
.h-sort {
    position: relative;
}

.h-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    min-width: 232px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(8, 17, 22, 0.12);
}

.h-sort-item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--bs-border-radius);
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.h-sort-item:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

.h-sort-item.is-active {
    background-color: var(--bs-tertiary-bg);
    font-weight: 500;
}

/* Grille des cartes : trois colonnes à la largeur propre de la carte. La carte ne porte
   que sa largeur de carrousel, la grille la lui reprend pour remplir sa colonne. */
.h-dash-projects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 24px;
}

.h-dash-projects .h-project-card {
    width: auto;
}

.h-dash-pagehead + .h-dash-empty,
.h-dash-projects + .h-dash-pagi {
    margin-top: 24px;
}
/* Le bandeau de régularisation des pièces coiffe la page quand il paraît : il ne doit pas
   coller au titre. */
.h-dash-alert + .h-dash-pagehead {
    margin-top: 24px;
}

/* Sur une page projet, le même bandeau coiffe la galerie. */
.h-detail-alert {
    margin-bottom: 24px;
}


@media (max-width: 991.98px) {
    .h-dash-projects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 575.98px) {
    .h-dash-pagehead-title {
        font-size: 1.75rem;
    }
    .h-dash-projects {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   VOLET DE FILTRES DU CATALOGUE

   Le volet reprend le gabarit du volet latéral du tableau de bord (.h-dash-drawer) : mêmes
   dimensions, même voile, même sortie par la droite. Il n'en diffère que par son pied fixe
   et par son contenu, rendu avec la page plutôt que chargé au clic.
   ========================================================================= */

.h-dash-filters {
    display: none;
}

/* Sans JavaScript, le volet n'a ni voile ni sortie animée : il se déplie en fin de page, où
   l'ancre du bouton « Filtres » mène. La classe `js` est posée dans l'en-tête du document, avant
   le premier rendu, sans quoi ce repli paraîtrait le temps d'un éclair.
   Le volet part replié du serveur, par l'attribut `hidden` ; Bootstrap le rend indéboulonnable
   (`[hidden] { display: none !important }`), d'où le seul `!important` de cette section : il ne
   fait qu'en contrer un autre. */
:root:not(.js) .h-dash-filters,
:root:not(.js) .h-dash-filters[hidden] {
    display: block !important;
    position: static;
    margin-top: 32px;
}

:root:not(.js) .h-dash-filters .h-dash-drawer-veil {
    display: none;
}

:root:not(.js) .h-dash-filters .h-dash-drawer-panel {
    position: static;
    width: auto;
    transform: none;
    border: 1px solid var(--bs-border-color);
}

.js .h-dash-filters:not([hidden]) {
    display: block;
}

.h-dash-filters .h-dash-drawer-panel {
    overflow: hidden;
}

/* Le volet de détail nomme une section, en petites capitales grises ; celui-ci porte un titre,
   qui se lit comme tel : la serif des titres, celle de « Projets » juste à côté, en graisse
   normale, plus légère que le gras des h1 : Reckless Neue 400 à vingt-quatre pixels. */
.h-dash-filters .h-dash-drawer-label {
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--bs-emphasis-color);
}

/* Le corps se range en colonne pour que le dernier groupe puisse prendre la hauteur restante.
   Il garde son propre défilement : quand le volet est trop court pour ses groupes, c'est lui
   qui cède. */
.h-dash-filters .h-dash-drawer-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 24px;
}

/* Pied fixe : les deux commandes restent atteignables quel que soit le défilement des groupes. */
.h-dash-drawer-foot {
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid var(--bs-border-color);
}

.h-filters-clear,
.h-filters-submit {
    flex: 1 1 0;
    /* `.h-dash-action` est une pilule qui se dimensionne sur son libellé et l'aligne à gauche :
       dans le pied, les deux boutons se partagent la largeur et centrent leur texte. */
    justify-content: center;
    min-height: 48px;
}

/* Le rythme des groupes se règle sur la marge du `fieldset`, et non sur son remplissage ni sur
   la marge de son intitulé : le navigateur rend la `legend` hors de la boîte de remplissage, où
   un `padding-top` reste sans effet, et Chrome ignore purement la marge supérieure d'une
   `legend` là où Firefox l'applique. La marge du `fieldset`, elle, vaut partout. */
.h-filters-group {
    flex: 0 0 auto;
    margin-top: 24px;
    padding: 0;
    border: 0;
}

/* Le dernier groupe prend la hauteur qui reste, pour que le volet ne garde pas de vide sous sa
   liste : trois rangées quand la place manque, davantage quand l'écran la donne. Il ne colle
   pas au pied pour autant. */
.h-dash-filters .h-filters-group:last-of-type {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 24px;
}

/* Le filet sépare l'intitulé de ses propres contrôles, et non un groupe du suivant : c'est
   ainsi que se range le volet, et cela rattache le trait à ce qu'il annonce. */
.h-filters-legend {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.875rem;
    /* Interlignage serré : seize pixels de haut pour cette ligne, là où
       l'interlignage hérité du corps en prendrait vingt-deux. */
    line-height: 16px;
    color: var(--bs-secondary-color);
}

.h-filters-note {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--bs-tertiary-color);
}

/* --- Pastilles ------------------------------------------------------------ */

/* Un groupe en rangées se clôt sur la hauteur de sa dernière rangée, déjà généreuse : le
   groupe suivant se resserre, il n'a plus besoin de ses vingt-quatre pixels. */
.h-filters-group:has(.h-filters-rows) + .h-filters-group {
    margin-top: 16px;
}

/* Les pastilles descendent un peu plus bas que les rangées sous leur filet : dix-sept pixels. */
.h-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 17px;
}

/* La case reste dans le flux du clavier : masquée à l'œil, jamais à la tabulation. */
.h-filters-chip input,
.h-filters-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.h-filters-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
    cursor: pointer;
}

.h-filters-chip:has(input:focus-visible) {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Survol : la pastille s'emplit d'un gris neutre, filet de la même teinte — elle paraît perdre
   son bord. Ni la pastille cochée ni la pastille éteinte ne s'y prêtent : l'une dit déjà un
   état, l'autre n'attend aucun clic. */
.h-filters-chip:not(:has(input:checked)):not(:has(input:disabled)):hover {
    border-color: #EAEAEA;
    background-color: #EAEAEA;
}

.h-filters-chip:has(input:checked) {
    border-color: #363636;
    background-color: #363636;
    color: #FFFFFF;
}

/* Éteinte : la valeur ne retiendrait aucun projet. Le filet quitte le beige pour un gris
   neutre, le libellé s'efface, et le curseur cesse d'annoncer un clic. */
.h-filters-chip:has(input:disabled) {
    border-color: #E8E8E9;
    color: #E5E2DE;
    cursor: default;
}

/* Le décompte suit la teinte de sa pastille : il fait partie du libellé, il ne s'en détache pas. */
.h-filters-count {
    color: inherit;
}

/* Croix de retrait : elle ne paraît que sur la pastille cochée, où elle dit comment défaire. */
.h-filters-chip .h-filters-mark {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23363636' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m5.5 5.5 5 5M10.5 5.5l-5 5'/%3E%3C/svg%3E");
}

.h-filters-chip:has(input:checked) .h-filters-mark {
    display: inline-block;
}

/* --- Rangées à case ronde -------------------------------------------------- */

/* Les rangées sont jointives : leur hauteur seule les espace. Cette
   hauteur est déclarée ici, et la zone défilante s'en sert pour tomber juste : une seule source,
   deux règles qui ne peuvent plus diverger. */
.h-filters-rows {
    --h-filters-row: 64px;
    display: flex;
    flex-direction: column;
}

.h-filters-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--h-filters-row);
    cursor: pointer;
}

.h-filters-row:has(input:focus-visible) {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius);
}

.h-filters-row .h-filters-option-label {
    flex: 1 1 auto;
}

/* La case ronde porte un trait neutre, non le beige des filets : elle désigne un état, pas une
   séparation. */
.h-filters-row .h-filters-mark {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--bs-primary-border-subtle);
    border-radius: 50%;
}

.h-filters-row:has(input:checked) .h-filters-mark {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.2 3.2 6.6-6.6'/%3E%3C/svg%3E");
}

/* Onze porteurs sur trois cent vingt-deux ont un logo : le monogramme est la règle, pas
   l'exception. Il reste neutre, la teinte des marques n'étant pas la nôtre à choisir. */
.h-filters-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 500;
}

.h-filters-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Le groupe « Type de placement » porte une icône là où les porteurs portent un logo : même
   pastille, pour que les deux rangées à case ronde se ressemblent. */
.h-filters-logo svg {
    width: 24px;
    height: 24px;
}

/* Le champ suit le rythme des pastilles sous le filet : il ne le touche pas. */
.h-filters-search {
    width: 100%;
    min-height: 44px;
    margin-top: 17px;
    margin-bottom: 8px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-size: 0.9375rem;
}

/* Cent quatre-vingt-quatorze porteurs ne tiennent pas dans un volet : la liste défile chez
   elle, le reste des groupes gardant sa place. Sa hauteur vaut exactement trois rangées — le
   défilement dans le défilement se supporte d'autant mieux qu'aucune rangée n'est coupée en
   deux ; c'est la moitié de rangée qui donnait l'impression d'un volet mal tenu. */
.h-filters-scroll {
    flex: 1 1 auto;
    min-height: calc(var(--h-filters-row) * 3);
    overflow-y: auto;
}

@media (max-width: 719.98px) {
    .h-dash-pagehead-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
    /* Les rangées font déjà soixante-quatre : les relever à quarante-quatre les rétrécirait. */
    .h-dash-headbtn,
    .h-sort-item {
        min-height: 44px;
    }
    .h-sort-btn {
        width: 44px;
    }
    .h-dash-drawer-foot {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================================
   PAGE DE DÉTAIL D'UN PROJET
   Balisage : templates/front/project/project/detail.html.twig et ses neuf partiels.

   La page a son propre gabarit, et non celui du tableau de bord : fond blanc de bord à bord,
   ni barre latérale ni menu de compte, une barre de retour qui traverse la fenêtre et une seule
   colonne de 900 px centrée dessous : contenu de x=270 à x=1169 dans une fenêtre de 1440, filet
   de barre de x=1 à x=1439, et du blanc partout ailleurs.
   Cette section pose donc le gabarit puis les blocs de la page. Les boutons réemploient
   .h-dash-action et .h-dash-headbtn plutôt que d'en refaire.
   ========================================================================= */

/* --- Filet de sécurité des icônes ------------------------------------------ */

/* Chaque partiel pose des `<svg viewBox="0 0 24 24">` sans attribut width/height : sans règle,
   un tel SVG se rend à sa taille intrinsèque, environ 300 px dans Chrome. Constaté à l'écran sur
   le chevron du lien de retour, qui poussait toute la page hors champ au point de la faire
   passer pour blanche. Chaque famille est dimensionnée ci-dessous ; le bouton « Partager » n'y
   figure pas, `.h-dash-headbtn svg` (plus haut) le fait déjà à 18 px. */
.h-detail-backlink svg,
.h-detail-meta-item svg,
.h-detail-figures-head svg,
.h-detail-gallery-all svg,
.h-detail-doc svg {
    flex: 0 0 auto;
}

.h-detail-gallery-all svg {
    width: 16px;
    height: 16px;
}

.h-detail-backlink svg {
    width: 20px;
    height: 20px;
}

.h-detail-meta-item svg {
    width: 16px;
    height: 16px;
}

.h-detail-figures-head svg {
    width: 20px;
    height: 20px;
}

.h-detail-doc svg {
    width: 18px;
    height: 18px;
}

/* --- Gabarit de la page ------------------------------------------------------ */

/* Le fond du tableau de bord est beige ; celui de cette page est blanc, d'un bord à l'autre.
   C'est ce blanc qui fait ressortir les tuiles et l'encart, qui reprennent le beige en carte. */
.h-detail-body {
    background-color: #FFFFFF;
}

/* Le filet du bas de barre traverse toute la fenêtre, quand son contenu garde ses marges : le
   filet est donc porté par la barre, les marges par la rangée qu'elle contient. */
.h-detail-topbar {
    border-bottom: 1px solid var(--bs-border-color);
}

/* Marges dissymétriques assumées : la pastille de retour à 80 px du bord gauche, la pilule
   « Partager » arrêtée à 136 px du bord droit. Sur un écran plus étroit, cette dissymétrie n'a
   plus de raison d'être et les deux marges se rejoignent. */
.h-detail-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 111px;
    max-width: 1440px;
    margin-inline: auto;
    padding: 0 136px 0 80px;
}

.h-detail-backlink {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    text-decoration: none;
}

/* Le chevron vit dans sa pastille : 48 px de côté, comme la pilule « Partager » qui lui fait face
   à l'autre bout de la barre. */
.h-detail-backlink-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-secondary-color);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.h-detail-backlink:hover {
    color: var(--bs-primary);
}

.h-detail-backlink:hover .h-detail-backlink-icon {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* La pilule de tête du tableau de bord mesure 40 px ; celle de cette barre en fait 48, à hauteur
   de la pastille de retour. */
.h-detail-topbar .h-dash-headbtn {
    min-height: 48px;
    padding: 0 24px;
}

/* La colonne de contenu est centrée dans la fenêtre, et non dans ce qui reste à droite d'une
   barre latérale. `min()` lui tient ses gouttières sans média : 900 px dès que la fenêtre les
   porte, la largeur disponible moins 16 px de chaque côté en deçà. */
.h-detail-shell-body {
    width: min(900px, 100% - 32px);
    margin-inline: auto;
    padding-bottom: 96px;
}

/* La mention réglementaire ferme la page. Même traitement que sur le tableau de bord — elle se
   lit à la taille du texte courant, en retrait de ton — mais posé ici, la page n'en dépendant
   plus. */
.h-detail-footnote {
    margin: 32px 0 0;
    font-size: var(--bs-body-font-size);
    line-height: 1.35;
    text-align: justify;
    color: var(--bs-tertiary-color);
}

/* --- Mosaïque de photos ------------------------------------------------------ */

/* La disposition suit `gallery.layout`, posé par le modèle de vue selon le nombre réel de
   photos — la feuille ne fait que dessiner les trois états qu'il déclare.
   Le cadre (fond blanc, coins arrondis) vit sur le conteneur : les pastilles et le bouton
   « toutes les photos » sont désormais ses enfants directs, au même titre que la bande de photos —
   sans quoi le défilement horizontal du carrousel mobile les emporterait avec elle. */
.h-detail-gallery-wrap {
    position: relative;
    /* Le filet de la barre est à y=111, la mosaïque commence à y=148. */
    margin-top: 36px;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
}

.h-detail-gallery {
    display: grid;
    gap: 8px;
    height: 476px;
}

.h-detail-shot {
    display: block;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.h-detail-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vignette de la vidéo : un bouton, qui perd son habillage natif pour se lire comme les photos. Le
   bouton lecture se centre dessus ; au clic, le lecteur YouTube prend sa place, à la même taille. */
.h-detail-shot-video {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background-color: #000000;
    cursor: pointer;
}

.h-detail-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #FFFFFF;
    transform: translate(-50%, -50%);
    transition: transform .15s ease;
}

.h-detail-shot-video:hover .h-detail-play,
.h-detail-shot-video:focus-visible .h-detail-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.h-detail-shot iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.h-detail-gallery.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.h-detail-gallery.is-pair {
    /* Gouttière de la paire : reprise des 8 px de la mosaïque. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Grande photo à gauche (560 px), deux vignettes empilées à droite — 63 / 37. */
.h-detail-gallery.is-mosaic {
    grid-template-columns: 560px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.h-detail-gallery.is-mosaic .h-detail-shot:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

.h-detail-gallery.is-mosaic .h-detail-shot:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.h-detail-gallery.is-mosaic .h-detail-shot:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

/* La mosaïque ne montre que trois photos ; la visionneuse ouvre les suivantes. Sans cette
   règle, une quatrième ouvrirait une rangée implicite et écraserait les deux premières —
   le rognage de la bande ne les cache plus depuis qu'il est passé sur son enveloppe. */
.h-detail-gallery.is-mosaic .h-detail-shot:nth-child(n+4) {
    display: none;
}

/* --- Pastilles et commande de la mosaïque ----------------------------------- */

.h-detail-badge {
    position: absolute;
    left: 25px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 12px;
    border-radius: var(--bs-border-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.h-detail-badge-type {
    top: 25px;
    background-color: var(--bs-primary);
    color: #FFFFFF;
}

/* Immobilier fractionné : même bleu que l'étiquette de type des cartons de portefeuille
   (homunity.project-card.css, .h-project-card.is-fractional .h-project-card-type). Le
   crowdfunding garde l'aplat de base ci-dessus. */
.h-detail-badge-type.is-fractional {
    background-color: #EEF0FF;
    color: var(--bs-emphasis-color);
}

/* La pastille de clôture va en bas à gauche de la mosaïque, et non sous celle de type, à 25 px
   du bord gauche et 25 px du bas. Les deux pastilles ne se disputent ainsi
   aucune place, quelle que soit la longueur de « Clôture dans 24 jours ». */
.h-detail-badge-closing {
    bottom: 25px;
    /* #F5E8E2 : teinte chaude sans jeton --bs-* correspondant. Aucun autre jeton
       du système ne s'en approche ; posée en littéral plutôt que d'inventer un nom. */
    background-color: #F5E8E2;
    color: var(--bs-emphasis-color);
}

/* 34 px de haut, icône de 16, huit pixels avant le libellé. À 25 px du bord droit, comme les
   trois pastilles de la mosaïque, pour aligner les quatre. */
.h-detail-gallery-all {
    position: absolute;
    right: 25px;
    bottom: 25px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.h-detail-gallery-all:hover {
    background-color: var(--bs-tertiary-bg);
}

/* Compteur et flèche du carrousel mobile, bouton « … » des documents : n'existent que sous 900 px,
   où la bande de photos défile au doigt et où les documents se replient. */
.h-detail-gallery-count,
.h-detail-gallery-prev,
.h-detail-gallery-next,
.h-detail-docs-more {
    display: none;
}

/* Sans photo, les pastilles s'alignent seules en tête de page : elles reprennent alors le flux,
   la position absolue n'ayant plus de mosaïque où se poser. */
.h-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 36px 0 0;
}

.h-detail-badges .h-detail-badge {
    position: static;
}

/* --- Grille à deux colonnes -------------------------------------------------- */

/* `minmax(0, …)` plutôt que des largeurs fixes : entre le seuil de repli en une colonne (900 px)
   et la largeur où la colonne retrouve ses 900 px (932 px, gouttières comprises), elle est plus
   étroite que la somme des deux pistes. Des pistes fixes déborderaient alors ; celles-ci se
   resserrent ensemble, proportionnellement. */
.h-detail-cols {
    display: grid;
    grid-template-columns: minmax(0, 515px) minmax(0, 360px);
    align-items: start;
    gap: 0 25px;
    /* 32 px sous la mosaïque : le haut du titre et celui de l'encart sont à la même ligne,
       32 px sous la dernière photo. */
    margin-top: 32px;
}

.h-detail-main {
    min-width: 0;
}

.h-detail-aside {
    min-width: 0;
    position: sticky;
    top: 24px;
}

@media (max-width: 899.98px) {
    /* Une seule colonne, et l'encart remonte juste après les tuiles : `.h-detail-main` s'efface
       (`display: contents`) pour que ses propres enfants — la tête et chaque section — deviennent
       des items directs de `.h-detail-cols`, au même titre que `.h-detail-aside`. Leur ordre de
       flex les rentre alors dans la lecture voulue sans toucher au balisage, qui place l'aside
       après le contenu principal. */
    .h-detail-cols {
        display: flex;
        flex-direction: column;
        /* La grille pose `align-items: start` pour ses deux colonnes ; en flex, elle rétrécissait
           chaque section à son contenu au lieu de lui laisser toute la largeur. */
        align-items: stretch;
    }
    .h-detail-main {
        display: contents;
    }
    .h-detail-head {
        order: 1;
    }
    /* La tête chevauche le bas de la photo de 24 px, en carte blanche à coins arrondis — seulement
       quand il y a une photo. Sans elle, `_gallery.html.twig` rend
       la rangée de pastilles `.h-detail-badges` à la place de `.h-detail-gallery-wrap`, et rien ne
       justifierait de la couvrir : le sélecteur qui porte le chevauchement se limite donc au frère
       immédiat de `.h-detail-cols` qui a réellement une photo. */
    .h-detail-gallery-wrap + .h-detail-cols .h-detail-head {
        position: relative;
        margin: -24px -16px 0;
        padding: 24px 16px 0;
        border-radius: 24px 24px 0 0;
        background-color: #FFFFFF;
        text-align: center;
    }
    /* Sans cette marge à zéro, les 32 px de `.h-detail-cols` (base bureau) s'ajouteraient aux -24 px
       de la tête ci-dessus : elle ne chevaucherait la photo que de 8 px sur les 24 mesurés. */
    .h-detail-gallery-wrap + .h-detail-cols {
        margin-top: 0;
    }
    .h-detail-meta {
        justify-content: center;
    }
    .h-detail-aside {
        order: 2;
        position: static;
    }
    .h-detail-main > .h-detail-section {
        order: 3;
    }

    /* --- Barre fixe : espace réservé en bas de page ----------------------------- */

    /* La barre est fixe : sans cette marge, elle couvrirait la fin de la page, mention
       réglementaire comprise. L'encoche de sécurité s'ajoute au retrait de base plutôt que de le
       remplacer : un téléphone sans encoche garde les 96 px habituels de `.h-detail-shell-body`. */
    .h-detail-shell-body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    /* --- Carrousel de photos ----------------------------------------------------- */

    /* Plein bord : la gouttière de page (16 px) devient une marge négative, le temps de la photo. */
    .h-detail-gallery-wrap {
        margin: 0 -16px;
        border-radius: 0;
    }
    .h-detail-gallery {
        display: flex;
        height: 300px;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-radius: 0;
    }
    .h-detail-gallery::-webkit-scrollbar {
        display: none;
    }
    .h-detail-shot,
    .h-detail-gallery.is-mosaic .h-detail-shot:nth-child(n+4) {
        display: block;
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
    .h-detail-gallery-all {
        display: none;
    }
    .h-detail-badge {
        left: 16px;
    }
    .h-detail-badge-type {
        top: 16px;
    }
    /* Relevée pour ne pas passer sous la carte de tête, qui chevauche la photo de 24 px. */
    .h-detail-badge-closing {
        bottom: 40px;
    }
    .h-detail-gallery-count {
        position: absolute;
        right: 16px;
        bottom: 40px;
        z-index: 1;
        display: block;
        color: #FFFFFF;
        font-size: 0.8125rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    }
    .h-detail-gallery-prev,
    .h-detail-gallery-next {
        position: absolute;
        top: 50%;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background-color: #FFFFFF;
        transform: translateY(-50%);
    }
    .h-detail-gallery-prev {
        left: 12px;
    }
    .h-detail-gallery-next {
        right: 12px;
    }

    /* --- Documents repliés --------------------------------------------------------- */

    /* Seuls le dossier et le premier document paraissent ; le bouton « … » déplie le reste. */
    .h-detail-docs:not(.is-open) > li:nth-child(n+3):not(.h-detail-docs-more) {
        display: none;
    }
    .h-detail-docs:not(.is-open) > .h-detail-docs-more {
        display: list-item;
    }
}

/* --- Tête : titre, lieu, tuiles ---------------------------------------------- */

.h-detail-title {
    /* 8 px sous le titre, et non 12 : la ligne de lieu tombe ainsi à 19 px de la ligne de base
       du nom, écart que 12 px portaient à 25. */
    margin: 0 0 8px;
    font-size: 1.875rem;
    line-height: 1.2;
    color: var(--bs-emphasis-color);
}

.h-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.h-detail-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-tertiary-color);
    font-size: 0.9375rem;
}

/* Un filet vertical sépare le lieu de la typologie : deux mots gris côte à
   côte se lisent autrement comme une seule phrase. Il vit dans le pseudo-élément du second pour
   disparaître de lui-même quand le projet n'en porte qu'un. */
.h-detail-meta-item + .h-detail-meta-item::before {
    content: '';
    /* 1 × 16, huit pixels de part et d'autre. */
    width: 1px;
    height: 16px;
    margin-right: 8px;
    background-color: var(--bs-border-color);
}

/* 249 × 58, en grille 2 × 2 : les pistes se resserrent ensemble sous leur largeur pleine plutôt
   que de déborder — même repli qu'au-dessus pour `.h-detail-cols`. */
.h-detail-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 249px));
    /* `minmax(58px, auto)` et non 58 px fixe : un intitulé qui recommence sur deux lignes (mobile,
       « Rendement locatif cible ») pousse alors sa rangée, plutôt que de déborder de la tuile. */
    grid-auto-rows: minmax(58px, auto);
    gap: 16px 17px;
    margin: 24px 0 0;
    padding: 0;
}

.h-detail-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* 12 px de retrait horizontal ; 8 px de retrait
       vertical pour qu'un intitulé sur deux lignes garde de l'air, sans changer la hauteur des
       tuiles sur une seule ligne (bien en dessous des 58 px minimum). */
    padding: 8px 12px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

/* Une tuile seule sur sa rangée — la troisième, depuis que la note de risque a quitté la tête — prend
   toute la largeur plutôt que de laisser un trou à sa droite. */
.h-detail-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.h-detail-tile-label {
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
}

/* La valeur porte l'or de l'accent : c'est le chiffre qui compte dans une tuile, pas son
   intitulé — lui reste en gris. */
.h-detail-tile-value {
    margin: 0;
    color: var(--bs-accent);
    font-size: 1.125rem;
    font-weight: 500;
}

/* Posé après ces règles de base, et non dans le bloc mobile de « Grille à deux colonnes » : la
   propriété `content` du filet s'y déclarerait avant celle-ci — à spécificité égale, elle
   perdrait face à la règle de base, plus bas dans la feuille, quel que soit le seuil de la
   media query. */
@media (max-width: 899.98px) {
    /* Sous 900 px, une ligne peut recommencer sur un second élément (lieu, typologie, montant de
       l'opération) : le filet de séparation se retrouverait alors en tête de ligne. Le `gap` de
       `.h-detail-meta` sépare déjà les items, sans lui. */
    .h-detail-meta-item + .h-detail-meta-item::before {
        content: none;
    }
    /* Les tuiles gardent leurs pistes de 249 px au plus : en deçà de leur largeur pleine (515 px de
       pistes et de gouttière), le surplus de la colonne — bien plus large qu'elles sous 900 px —
       les laissait collées à gauche. */
    .h-detail-tiles {
        justify-content: center;
    }
}

/* --- Rythme des sections ------------------------------------------------------ */

/* La première section suit la tête sans filet : aucun entre le bouton de simulation et
   « Le projet », et son seul écart vaut celui d'un intérieur de section. */
.h-detail-head + .h-detail-section {
    margin-top: 0;
    border-top: 0;
}

/* Composition, chiffres, calendrier, porteur, documents : chacun son filet au-dessus, comme la
   tête qui les précède toutes. Pas de reprise sur `:first-child` — la tête n'est jamais une
   `.h-detail-section`, la première section en porte donc un à bon droit. */
.h-detail-section {
    /* Cotes encre contre encre : le haut de capitale d'un intitulé tombe
       40 px sous son filet, et le dernier contenu s'arrête 24 px avant le filet suivant. La boîte
       du titre commençant 6 px au-dessus de son encre, le retrait vaut 34 et non 40. */
    margin-top: 24px;
    padding-top: 34px;
    border-top: 1px solid var(--bs-border-color);
}

/* Le serif est réservé au nom du projet. Les intitulés de section sont dans la chasse du texte,
   à 14 px de hauteur de capitale, soit environ 20 px de corps. Sans
   cette reprise, la règle générale des titres les passerait tous en Reckless Neue. */
.h-detail-section-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Huit pixels sous l'intitulé : le chapeau se lit avec lui. */
.h-detail-section-lead {
    margin: 8px 0 0;
    color: var(--bs-tertiary-color);
    font-size: 0.9375rem;
}

/* Le premier élément après un intitulé ou un chapeau de section. Les deux sélecteurs sont
   qualifiés par la section : sans cela, le `margin: 0` que chaque bloc pose pour lui-même —
   `.h-detail-docs`, `.h-detail-steps`, `.h-detail-figures` — l'emportait par simple ordre de
   déclaration, et les pastilles de documents se collaient à leur intitulé. Constaté à l'écran,
   sept pixels au lieu de seize. */
.h-detail-section > .h-detail-section-title + * {
    margin-top: 16px;
}

.h-detail-section > .h-detail-section-lead + * {
    margin-top: 16px;
}

/* Le chapeau fait exception : il se lit avec son intitulé, à huit pixels — la règle ci-dessus, plus
   spécifique que `.h-detail-section-lead`, le repoussait à seize. 32 px d'axe à axe. */
.h-detail-section > .h-detail-section-title + .h-detail-section-lead {
    margin-top: 8px;
}

/* --- Texte courant ------------------------------------------------------------ */

.h-detail-prose {
    color: var(--bs-secondary-color);
    /* 20 px pour 16 px de corps. */
    line-height: 1.25;
}

.h-detail-prose p {
    margin: 0 0 12px;
}

.h-detail-prose p:last-child {
    margin-bottom: 0;
}

.h-detail-prose ul,
.h-detail-prose ol {
    margin: 0 0 12px;
    padding-left: 1.25em;
}

.h-detail-prose a {
    color: var(--bs-primary);
}

/* Replié, le texte ne montre que trois lignes ; le script retire la classe pour le déplier. */
.h-detail-prose.is-clamped {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Le chevron part masqué ; le script ne l'affiche que sur un texte qui dépasse ses trois lignes.
   Sans cette règle, le `display: inline-flex` ci-dessous primerait sur l'attribut `hidden`. */
.h-detail-more[hidden] {
    display: none;
}

/* Un lien, pas un bouton : ni fond ni bordure. */
/* Ce lien n'est pas souligné : il porte un chevron, qui se retourne au dépliage. */
.h-detail-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 27 px de l'axe de la dernière ligne à celui du lien. */
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-primary);
    font: inherit;
    font-size: 0.9375rem;
    text-decoration: none;
}

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

.h-detail-more-chevron {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.h-detail-more[aria-expanded="true"] .h-detail-more-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .h-detail-more-chevron {
        transition: none;
    }
}

/* Un texte ne se colle ni aux dépliants de chiffres qui l'encadrent, ni à la carte du porteur
   qu'il décrit : seize pixels, l'écart d'un intérieur de section. Les dépliants qui suivent un
   texte n'en prennent que huit : leur rangée de 48 px porte déjà son air. */
.h-detail-figures + .h-detail-clamp,
.h-detail-promoter + .h-detail-clamp {
    margin-top: 16px;
}

.h-detail-clamp + .h-detail-figures {
    margin-top: 8px;
}

/* --- Emplacement ---------------------------------------------------------------- */

/* L'adresse en toutes lettres, sous l'intitulé. La règle de section pose déjà seize pixels ; il
   en faut vingt-neuf entre les deux encres, d'où les treize d'appoint. */
.h-detail-address {
    margin: 13px 0 0;
    color: var(--bs-secondary-color);
}

/* Le commentaire de localisation suit l'adresse, sans s'y coller : deux lignes grises accolées se
   lisent comme un seul paragraphe. */
.h-detail-address + .h-detail-clamp {
    margin-top: 8px;
}

/* 515 × 327, fluide en deçà : la hauteur suit la largeur pour que la carte garde ses
   proportions sur un téléphone. Le fond tient la place pendant que la bibliothèque arrive, plutôt
   que de laisser le bloc sauter à l'apparition de la carte.
   Dix-sept pixels sous le texte, posés ici plutôt que laissés au hasard de
   l'interligne du paragraphe qui précède, lequel n'est pas toujours là. */
.h-detail-map {
    margin-top: 17px;
    height: 327px;
    max-height: 64vw;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}

/* --- Composition du projet ----------------------------------------------------- */

.h-detail-rows {
    margin: 0;
}

/* Pas de filet entre les mesures : une rangée tous les 36 px, la première
   à l'aplomb de l'intitulé. */
.h-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.h-detail-row:first-child {
    padding-top: 0;
}

.h-detail-row:last-child {
    padding-bottom: 0;
}

.h-detail-row dt {
    color: var(--bs-secondary-color);
}

.h-detail-row dd {
    margin: 0;
    color: var(--bs-emphasis-color);
    text-align: right;
}

/* --- Les chiffres du projet (dépliants) ----------------------------------------- */

/* Un filet ferme chaque rangée, aucun ne surmonte la première : le
   filet appartient donc au groupe, par le bas, et non à son intitulé, par le haut. La dernière
   rangée garde ainsi son trait de clôture. */
.h-detail-figures {
    margin: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-detail-figures-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    /* 48 px de rangée : les quatre se succèdent au même pas. */
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-emphasis-color);
    font: inherit;
    text-align: left;
}

/* L'intitulé pousse le montant et le chevron à droite ; sans montant, le chevron reste seul au
   bout de la rangée. */
.h-detail-figures-title {
    flex: 1 1 auto;
    min-width: 0;
}

.h-detail-figures-total {
    flex: 0 0 auto;
}

/* Le chevron pivote plutôt que de changer d'icône : le script ne fait que basculer
   `aria-expanded`, la feuille se charge du reste. */
.h-detail-figures-head svg {
    transition: transform 0.2s ease;
}

.h-detail-figures-head[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .h-detail-figures-head svg {
        transition: none;
    }
}

.h-detail-figures-body {
    margin: 0;
    padding: 4px 0 16px;
}

.h-detail-figures-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.h-detail-figures-row:last-child {
    border-bottom: 0;
}

.h-detail-figures-row dt {
    color: var(--bs-secondary-color);
}

/* Le montant ne se replie jamais : sans `nowrap`, un intitulé long (« Coût total de l'opération (TTC) ») ou une
   colonne étroite renvoie le « € » seul à la ligne. L'intitulé reste libre de se replier. */
.h-detail-figures-row dd {
    margin: 0;
    color: var(--bs-emphasis-color);
    text-align: right;
    white-space: nowrap;
}

/* --- Calendrier prévisionnel ----------------------------------------------------- */

.h-detail-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-detail-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    /* 56 px d'une pastille à la suivante : 32 de carré, 12 de part et d'autre. */
    padding: 12px 0;
}

/* Chaque étape porte son propre segment de rail, comme la frise de suivi de chantier
   (.h-dash-entry) : la ligne reste continue sans qu'un pseudo-élément de la liste ait à en
   calculer la hauteur sur un nombre d'étapes qui varie d'un projet à l'autre. */
.h-detail-step::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 15px;
    width: 2px;
    background-color: var(--bs-border-color);
}

.h-detail-step:first-child::before {
    top: 28px;
}

.h-detail-step:last-child::before {
    bottom: auto;
    height: 28px;
}

/* Carré arrondi portant le jalon, en bleu sur bleu pâle. */
.h-detail-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

/* L'intitulé et sa seconde ligne, plus discrète, s'empilent. La seconde porte la date, qui est ce
   que l'étape sait dire : `product_step` n'a pas de montant. */
.h-detail-step-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Interlignes resserrés : à l'interligne du corps de texte, les deux lignes dépasseraient la
   pastille et la rangée passerait de 56 à 68 px. */
.h-detail-step-name {
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    line-height: 1.2;
}

.h-detail-step-date {
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    line-height: 1.2;
}

/* --- Porteur de projet ------------------------------------------------------------ */

/* Le porteur tient dans une carte bordée, détachée de sa description. La carte est
   désormais un lien vers le catalogue filtré sur ce porteur, d'où la neutralisation de la couleur
   et du soulignement — hérités sinon du lien par défaut. */
.h-detail-promoter {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: inherit;
    text-decoration: none;
}

.h-detail-promoter:hover {
    border-color: var(--bs-secondary-color);
}

/* Onze porteurs sur trois cent vingt-deux ont un logo (relevé au volet de filtres) : le
   monogramme est la règle. Même recette que `.h-filters-logo`, à l'échelle de cette page. */
.h-detail-promoter-logo {
    display: inline-flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 500;
}

.h-detail-promoter-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nom et décompte s'empilent, entre le monogramme et le chevron : `flex: 1 1 auto` leur laisse
   toute la place restante, sans quoi le lien se dimensionnerait sur son seul contenu. */
.h-detail-promoter-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.h-detail-promoter-name {
    color: var(--bs-emphasis-color);
    font-size: 1.0625rem;
    font-weight: 500;
}

/* Le décompte de projets porte l'accent, comme un lien discret vers le catalogue filtré. */
.h-detail-promoter-count {
    color: var(--bs-primary);
    font-size: 0.875rem;
}

.h-detail-promoter-chevron {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
}

/* --- Documents -------------------------------------------------------------------- */

/* Huit pixels entre les rangées, neuf entre les pastilles d'une même rangée. */
.h-detail-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-detail-doc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 36 de haut, 12 de rayon. */
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    text-decoration: none;
}

.h-detail-doc:hover {
    border-color: var(--bs-secondary-color);
}

/* --- Foire aux questions ------------------------------------------------------------ */

/* Chaque question tient une rangée de 52 px fermée par un filet, chevron à droite. Le dépliant
   est celui de `<details>` : sans script, la réponse s'ouvre quand même. */
/* Les questions ouvrent à ras de leur intitulé : le haut de la première rangée se pose sur le bas
   de la boîte du titre. */
.h-detail-section > .h-detail-faq {
    margin-top: 0;
}

.h-detail-faq-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.h-detail-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    color: var(--bs-emphasis-color);
    font-size: 1rem;
    cursor: pointer;
    /* Le triangle par défaut du navigateur cède la place au chevron du système : `list-style`
       pour Firefox, le pseudo-élément pour les navigateurs WebKit. */
    list-style: none;
}

.h-detail-faq-question::-webkit-details-marker {
    display: none;
}

.h-detail-faq-chevron {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    /* Même tempo que le déroulé de la réponse (homunity.project.detail.js). */
    transition: transform 0.25s ease;
}

.h-detail-faq-item[open]:not(.is-closing) .h-detail-faq-chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .h-detail-faq-chevron {
        transition: none;
    }
}

.h-detail-faq-answer {
    padding-bottom: 20px;
    color: var(--bs-secondary-color);
    line-height: 1.6;
}

.h-detail-faq-answer p {
    margin: 0 0 12px;
}

.h-detail-faq-answer p:last-child {
    margin-bottom: 0;
}

/* La dernière question ferme la liste par son filet : le bloc d'aide, qui la suit toujours, n'en
   pose pas un second — deux traits à 40 px d'écart pour une seule séparation. */
.h-detail-help {
    margin-top: 0;
    border-top: 0;
    /* 39 px du filet de la dernière question à l'axe de « Besoin d'aide ? », contre 47
       entre deux sections ordinaires. */
    padding-top: 26px;
}

/* --- Simulateur d'investissement -------------------------------------------------------- */

/* Sur bureau, il occupe la colonne de droite, déplié ; sous 900 px il remonte sous les tuiles,
   replié derrière son intitulé (règles mobiles : juste après cette section, et non dans « Grille à
   deux colonnes » — l'ordre de la feuille doit les faire gagner face aux règles de base ci-dessous).
   Le calcul initial vient de ProjectDetail::simulate() ; homunity.project.simulator.js le rejoue à
   chaque part ajoutée ou retirée. */
.h-detail-sim {
    padding: 8px 24px 24px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
}

/* Compte non identifié : contenu neutralisé, dans l'esprit du flou et du `pointer-events: none`
   de la page d'origine — la modale de vérification (incluse par le gabarit) prend le relais. */
.h-detail-sim.is-locked {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

/* Sur bureau, l'intitulé n'est qu'un titre : il ne replie rien, et le bouton n'y répond pas — seul
   `pointer-events: none` l'empêche d'avoir l'air cliquable. */
.h-detail-sim-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-emphasis-color);
    font-size: 1.0625rem;
    font-weight: 500;
    pointer-events: none;
}

/* Masqué sur bureau : le chevron n'a de sens que sous 900 px, où l'intitulé replie le corps. */
.h-detail-sim-chevron {
    display: none;
    transition: transform 0.2s ease;
}

/* Sélecteur de parts : il reprend la boîte de l'ancien champ de saisie (bordure arrondie, 56 px),
   `−` et `+` ronds aux deux bouts, le montant au centre. */
.h-detail-sim-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    margin-top: 12px;
    padding: 0 6px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
}

.h-detail-sim-step {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    color: var(--bs-emphasis-color);
    font-size: 1.375rem;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.h-detail-sim-step:hover:not(:disabled) {
    border-color: var(--bs-emphasis-color);
}

.h-detail-sim-step:focus-visible,
.h-detail-sim-value:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.h-detail-sim-step:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Chiffres proportionnels, comme le reste du simulateur : pas de `tabular-nums`. La valeur occupe
   toute la hauteur du sélecteur, pour que son anneau de focus encadre le montant plutôt que de
   n'en souligner qu'une bande. */
.h-detail-sim-value {
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
    min-width: 0;
    border-radius: var(--bs-border-radius);
    color: var(--bs-emphasis-color);
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .h-detail-sim-step {
        transition: none;
    }
}

.h-detail-sim-shares {
    margin: 8px 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    text-align: center;
}

.h-detail-sim-result {
    margin: 16px 0 0;
    padding: 8px 20px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.h-detail-sim-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.h-detail-sim-line dt {
    font-weight: 400;
    color: var(--bs-emphasis-color);
}

/* Chiffres proportionnels : les chiffres à chasse fixe de PP Neue Montreal
   sont larges et espacés (« 1 1 5,00 € »), et rien ici ne s'aligne en colonne. `white-space:
   nowrap` empêche le « € » de retomber seul à la ligne quand l'intitulé (« Mes versements
   trimestriels prévisionnels ») force le sien à se replier ; celui-ci reste libre de le faire, le
   `gap` de `.h-detail-sim-line` gardant l'écart entre les deux colonnes. */
.h-detail-sim-line dd {
    margin: 0;
    color: var(--bs-emphasis-color);
    text-align: right;
    white-space: nowrap;
}

.h-detail-sim-line.is-final {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bs-border-color);
}

.h-detail-sim-line.is-final dd {
    color: var(--bs-success);
    font-weight: 500;
}

.h-detail-sim-summary {
    margin: 16px 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    text-align: center;
}

.h-detail-sim-summary strong {
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

.h-detail-sim-cta {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}

/* Le lien vers le dossier détaillé, en tête de page : `.h-dash-action` se dimensionnerait sinon sur
   son seul libellé. En aplat noir, il se détache des tuiles crème au-dessus. */
.h-detail-file {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
    border-color: var(--bs-emphasis-color);
    background-color: var(--bs-emphasis-color);
    color: #FFFFFF;
}

.h-detail-file:hover {
    border-color: #000000;
    background-color: #000000;
    color: #FFFFFF;
}

/* --- Compte non vérifié ----------------------------------------------------------- */

/* Sans KYC validé, une section réservée garde son intitulé lisible, son contenu se floute ;
   l'attribut `inert` du gabarit lui ôte clics et focus. Le lien du dossier détaillé se floute de
   même. */
.h-detail-section.is-locked > :not(.h-detail-section-title),
.h-detail-file.is-locked {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* La modale de vérification se pose sur un voile qui couvre toute la fenêtre, et la page cesse de
   défiler : elle ne se ferme pas. */
.h-detail-body:has(.h-detail-lock) {
    overflow: hidden;
}

.h-detail-lock {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(33, 33, 33, 0.45);
}

.h-detail-lock-card {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    border-radius: var(--bs-border-radius-xl);
    background-color: #FFFFFF;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.h-detail-lock-card:focus {
    outline: 0;
}

.h-detail-lock-title {
    margin: 0 0 12px;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.h-detail-lock-text {
    margin: 0 0 24px;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.h-detail-lock-text strong {
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .h-detail-lock-card {
        padding: 24px;
    }
    .h-detail-lock-action {
        width: 100%;
        justify-content: center;
    }
}

/* Barre d'investissement mobile : aucune jauge de collecte, seulement son bouton.
   N'existe que sous 900 px — les règles qui la font paraître sont juste ci-dessous. */
.h-detail-bar {
    display: none;
}

/* Sous 900 px, les mêmes propriétés reviennent ici, dans un bloc posé après leurs règles de base,
   plutôt que dans celui de « Grille à deux colonnes » qui les précède dans la feuille : une media
   query ne pèse pas sur la spécificité, seul l'ordre des règles décide entre deux déclarations à
   égalité — un bloc mobile placé avant sa règle de base perdrait donc face à elle, même sous le
   seuil qui le concerne. */
@media (max-width: 899.98px) {
    /* --- Simulateur replié ---------------------------------------------------- */

    /* Sous 900 px, l'intitulé redevient un dépliant : le corps se replie derrière lui plutôt que de
       rester ouvert comme sur bureau. */
    .h-detail-sim {
        padding: 0 16px;
        margin-top: 16px;
    }
    .h-detail-sim-toggle {
        pointer-events: auto;
        min-height: 56px;
    }
    /* Un compte non identifié garde son simulateur neutralisé, dépliant compris : sans cette
       reprise — plus spécifique, elle l'emporterait de toute façon — `pointer-events: auto`
       ci-dessus rouvrirait le bouton au clic malgré le flou. */
    .h-detail-sim.is-locked .h-detail-sim-toggle {
        pointer-events: none;
    }
    .h-detail-sim-chevron {
        display: block;
    }
    .h-detail-sim.is-open .h-detail-sim-chevron {
        transform: rotate(180deg);
    }
    .h-detail-sim:not(.is-open) .h-detail-sim-body {
        display: none;
    }
    .h-detail-sim.is-open {
        padding-bottom: 16px;
    }
    /* --- Barre d'investissement fixe -------------------------------------------- */

    /* Sous le bouton du simulateur, qu'il soit ouvert ou replié : elle ne paraît que lorsque ce
       bouton quitte l'écran (homunity.project.simulator.js). */
    .h-detail-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: block;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--bs-border-color);
        background-color: #FFFFFF;
    }
    .h-detail-bar[hidden] {
        display: none;
    }
    .h-detail-bar-cta {
        width: 100%;
        justify-content: center;
    }
}

/* --- Page détail SCPI ---------------------------------------------------------------- */

/* Balisage : templates/front/scpi/scpi/detail.html.twig. La SCPI ne se souscrit plus en ligne :
   l'encart de droite propose le rendez-vous avec un conseiller, à la place du simulateur, sous la
   même carte que lui (bordure, rayon, retrait). */
.h-detail-advisor {
    padding: 24px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
}

.h-detail-advisor-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.h-detail-advisor-photo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-body-bg);
}

.h-detail-advisor-title {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
}

.h-detail-advisor-text {
    margin: 16px 0 0;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.h-detail-advisor-cta {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

/* Répartition des actifs : une barre empilée, un segment par typologie, la largeur valant la part
   (`flex-grow`, posé par le gabarit). Six teintes au plus, qui se distinguent par leur
   clarté autant que par leur teinte. */
.h-detail-split {
    display: flex;
    gap: 2px;
    height: 12px;
    overflow: hidden;
    border-radius: var(--bs-border-radius-pill);
}

.h-detail-section > .h-detail-section-lead + .h-detail-split {
    margin-top: 20px;
}

.h-detail-split-part {
    flex: 0 1 0;
    min-width: 2px;
}

.h-detail-split-part.is-1, .h-detail-legend-swatch.is-1 { background-color: var(--bs-primary); }
.h-detail-split-part.is-2, .h-detail-legend-swatch.is-2 { background-color: #6A72E3; }
.h-detail-split-part.is-3, .h-detail-legend-swatch.is-3 { background-color: #A9AEF0; }
.h-detail-split-part.is-4, .h-detail-legend-swatch.is-4 { background-color: var(--bs-accent); }
.h-detail-split-part.is-5, .h-detail-legend-swatch.is-5 { background-color: #D9C2A0; }
.h-detail-split-part.is-6, .h-detail-legend-swatch.is-6 { background-color: var(--bs-border-color); }

.h-detail-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.h-detail-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-detail-legend-swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.h-detail-legend-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-secondary-color);
}

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

/* Historique des performances : une colonne par année, des filets entre les indicateurs comme
   entre les lignes des chiffres d'un projet. */
.h-detail-perf-wrap {
    overflow-x: auto;
}

.h-detail-perf {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.h-detail-perf th,
.h-detail-perf td {
    padding: 10px 0 10px 12px;
    text-align: right;
    white-space: nowrap;
}

.h-detail-perf th:first-child {
    padding-left: 0;
    text-align: left;
}

.h-detail-perf thead th {
    padding-top: 0;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    font-weight: 400;
}

.h-detail-perf tbody tr {
    border-top: 1px solid var(--bs-border-color);
}

.h-detail-perf tbody tr:last-child {
    border-bottom: 1px solid var(--bs-border-color);
}

.h-detail-perf tbody th {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.h-detail-perf td {
    color: var(--bs-emphasis-color);
}

/* Les renvois (2) à (5) du tableau. */
.h-detail-notes {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* La carte de la société de gestion n'est pas un lien, contrairement à celle du porteur : elle
   ne réagit donc pas au survol. */
div.h-detail-promoter:hover {
    border-color: var(--bs-border-color);
}

@media (max-width: 899.98px) {
    /* Sous les tuiles, à l'écart que le simulateur y prend sur les autres pages de détail. */
    .h-detail-advisor {
        margin-top: 16px;
    }
    /* Le tableau sort de la gouttière pour défiler bord à bord. */
    .h-detail-perf-wrap {
        margin-inline: -16px;
        padding-inline: 16px;
    }
    .h-detail-perf {
        min-width: 470px;
    }
    .h-detail-legend {
        gap: 10px 16px;
    }
}

/* --- Page détail investissement locatif ---------------------------------------------- */

/* Balisage : templates/vefa/front/vefa/detail.html.twig. Le programme ne se souscrit pas en ligne :
   l'encart de droite reprend la carte du conseiller de la SCPI, avec deux boutons (« J'investis »
   et « Prendre rendez-vous ») là où la SCPI n'en a qu'un. */

/* Sur bureau, la photo et l'intitulé sur une ligne, le texte dessous, comme pour la SCPI : la
   grille laisse l'intitulé et le texte dans un même bloc, que le mobile range à côté de la photo. */
.h-detail-advisor-vefa .h-detail-advisor-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 0 16px;
}

.h-detail-advisor-vefa .h-detail-advisor-intro {
    display: contents;
}

.h-detail-advisor-vefa .h-detail-advisor-text {
    grid-column: 1 / -1;
}

.h-detail-advisor-cta + .h-detail-advisor-cta {
    margin-top: 12px;
}

/* Tableau des lots : même trame que l'historique des performances de la SCPI — intitulés gris,
   filet entre chaque ligne, chiffres en chasse fixe. */
.h-detail-lots {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.h-detail-section > .h-detail-clamp + .h-detail-lots,
.h-detail-section > .h-detail-clamp + .h-detail-lots + .h-detail-lots-list {
    margin-top: 20px;
}

.h-detail-lots th,
.h-detail-lots td {
    padding: 10px 0 10px 12px;
    text-align: right;
    white-space: nowrap;
}

.h-detail-lots th:nth-child(-n+2),
.h-detail-lots td:nth-child(-n+2) {
    text-align: left;
}

.h-detail-lots th:first-child {
    padding-left: 0;
}

.h-detail-lots thead th {
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--bs-tertiary-color);
    font-size: 0.8125rem;
    font-weight: 400;
}

.h-detail-lots tbody tr {
    border-top: 1px solid var(--bs-border-color);
}

.h-detail-lots tbody tr:last-child {
    border-bottom: 1px solid var(--bs-border-color);
}

.h-detail-lots tbody th {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-detail-lots td {
    color: var(--bs-secondary-color);
}

.h-detail-lots .h-detail-lots-price {
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

/* La pastille de téléchargement tient sa ligne : retrait vertical réduit pour garder 60 px. */
.h-detail-lots .h-detail-lots-plan {
    padding-top: 4px;
    padding-bottom: 4px;
}

.h-detail-lots-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    color: var(--bs-emphasis-color);
    vertical-align: middle;
}

.h-detail-lots-download:hover {
    border-color: var(--bs-emphasis-color);
    color: var(--bs-emphasis-color);
}

/* Liste à deux lignes du mobile : n'existe que sous 720 px. */
.h-detail-lots-list {
    display: none;
}

.h-detail-lots-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--bs-border-color);
}

.h-detail-lots-body {
    flex: 1 1 auto;
    min-width: 0;
}

.h-detail-lots-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.h-detail-lots-name,
.h-detail-lots-line .h-detail-lots-price {
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

.h-detail-lots-line .h-detail-lots-price {
    flex: 0 0 auto;
}

.h-detail-lots-specs {
    margin-top: 2px;
    color: var(--bs-tertiary-color);
    font-size: 0.875rem;
}

.h-detail-lots-item .h-detail-lots-download {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}

@media (max-width: 899.98px) {
    /* « J'investis » passe dans la barre fixe : l'encart ne garde que le rendez-vous, et range
       l'intitulé et le texte à droite de la photo. */
    .h-detail-advisor-vefa {
        padding: 16px;
    }
    .h-detail-advisor-vefa .h-detail-advisor-head {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0 12px;
    }
    .h-detail-advisor-vefa .h-detail-advisor-photo {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }
    .h-detail-advisor-vefa .h-detail-advisor-intro {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .h-detail-advisor-vefa .h-detail-advisor-text {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.35;
    }
    .h-detail-advisor-vefa .h-detail-advisor-invest {
        display: none;
    }
    .h-detail-advisor-vefa .h-detail-advisor-cta + .h-detail-advisor-cta {
        margin-top: 16px;
    }
}

@media (max-width: 719.98px) {
    .h-detail-lots {
        display: none;
    }
    .h-detail-lots-list {
        display: block;
        margin: 20px 0 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid var(--bs-border-color);
    }
}

/* --- Adaptations du gabarit -------------------------------------------------------- */

/* Sur un écran plus étroit, les marges dissymétriques de la barre de retour (80 / 136) se
   rejoignent : elles ne tenaient qu'au cadre de 1440 px. */
@media (max-width: 1199.98px) {
    .h-detail-topbar-inner {
        padding-inline: 24px;
    }
}

/* Le tableau de bord ramène ses actions à 36 px sous cette largeur, pour sa rangée d'actions.
   Cette page n'est pas le tableau de bord : les boutons de l'encart y prennent toute la largeur
   et restent des cibles tactiles. */
@media (max-width: 991.98px) {
    .h-detail-shell .h-dash-action {
        height: 48px;
    }
}

/* --- Cibles tactiles --------------------------------------------------------------- */

@media (max-width: 719.98px) {
    .h-detail-doc {
        height: 44px;
    }
    .h-detail-gallery-all {
        height: 44px;
    }
    .h-detail-figures-head {
        min-height: 44px;
    }
    /* La barre de retour se resserre : 111 px de blanc pour deux commandes, c'est la moitié de
       ce qu'un téléphone montre d'un coup. */
    .h-detail-topbar-inner {
        height: 80px;
        padding-inline: 16px;
    }
    /* Le lien se réduit à son chevron : à 390 px, le libellé et la pilule « Partager » ne tiennent
       pas côte à côte. Le libellé reste lu par les lecteurs d'écran, sans quoi le lien n'aurait
       plus de nom du tout — son chevron est décoratif. */
    .h-detail-backlink-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ============================================================================
   Tunnels de souscription — balisage : templates/front/investment/tunnel/,
   templates/front/fractional/investment/tunnel/ et front/layouts/investment.layout.html.twig.
   En-tête de tunnel réduit (h-funnel-header + h-kyc-header-inner + h-sim-close),
   puis une colonne centrée de 545 px sur fond blanc.
   ============================================================================ */

.h-invest-page {
    background-color: #FFFFFF;
}

/* Boutons de l'en-tête (outils de dev), alignés à gauche de la croix. */
.h-invest-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.h-invest-header-actions .btn {
    white-space: nowrap;
}

/* En-tête plus haut que celui du tunnel KYC : 111 px, logo de 120 px, marges de 40 px, croix de 48 px
   (sur bureau). En mobile, on garde la hauteur du tunnel KYC. */
.h-invest-header {
    height: 4.5rem;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .h-invest-header {
        height: 6.9375rem;
        padding: 0 2.5rem;
    }
    .h-invest-header .h-funnel-logo {
        width: 7.5rem;
    }
    .h-invest-close {
        width: 3rem;
        height: 3rem;
    }
}

.h-invest-shell {
    display: flex;
    flex-direction: column;
    max-width: calc(34.0625rem + 2rem);
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

@media (min-width: 992px) {
    .h-invest-shell {
        padding-top: 3.5rem;
    }
}

/* --- En-tête d'écran ----------------------------------------------------- */

.h-invest-eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

.h-invest-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

@media (min-width: 576px) {
    .h-invest-title {
        font-size: 1.75rem;
    }
}

.h-invest-subtitle {
    margin: 0 0 1rem;
    /* Posé aussi sur une légende de fieldset, qui n'hérite pas de la police des titres. */
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    color: var(--bs-emphasis-color);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Caractéristiques du projet (taux, durée, objectif), en bandeau bordé. */
.h-invest-facts {
    display: flex;
    margin: 0 0 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    /* Le crème de la marque, comme les tuiles de la page de détail et le bloc des intérêts. */
    background-color: var(--bs-body-bg);
}

.h-invest-facts > div {
    flex: 1 1 0;
    padding: 0.75rem 1rem;
}

.h-invest-facts > div + div {
    border-left: 1px solid var(--bs-border-color);
}

.h-invest-facts dt {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--bs-tertiary-color);
}

.h-invest-facts dd {
    margin: 0;
    font-weight: 500;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
}

/* À 360 px, chaque case ne dispose que d'une centaine de pixels : un objectif à sept chiffres
   (« 4 700 000 € ») doit tenir sur une ligne. */
@media (max-width: 575.98px) {
    .h-invest-facts > div {
        padding: 0.625rem 0.625rem;
    }
    .h-invest-facts dd {
        font-size: 0.875rem;
    }
}

/* --- Déclaration sur l'honneur ------------------------------------------- */

.h-invest-declarations {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 2rem;
    padding-left: 1.25rem;
    color: var(--bs-emphasis-color);
}

.h-invest-attest {
    margin-bottom: 1.5rem;
}

.h-invest-attest .form-check-label {
    font-size: 0.875rem;
    cursor: pointer;
}

/* --- Modalité d'investissement ------------------------------------------- */

.h-invest-form {
    display: flex;
    flex-direction: column;
}

.h-invest-amount-label {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

/* Montant total mis en avant, en display. Grisé tant qu'il vaut zéro. */
.h-invest-amount {
    margin: 0 0 1rem;
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.h-invest-amount.is-empty {
    color: #A3A3A3;
}

@media (min-width: 576px) {
    .h-invest-amount {
        font-size: 3.5rem;
    }
}

/* Montant et compteur d'obligations sur une même ligne (tunnel crowdfunding) : le montant se saisit à
   gauche, en display, le compteur − / + se tient à sa droite. Le champ du montant garde l'allure du
   chiffre affiché (ni cadre ni fond) ; seul un filet pointillé, plein au focus, dit qu'il se modifie. */
.h-invest-stake {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
}

/* Les deux colonnes s'effacent : leurs enfants se rangent dans la grille, les intitulés sur la première
   ligne — « Obligations de 1 000 € » à la hauteur de « Montant total à investir » —, le montant et le
   compteur sur la seconde. */
.h-invest-stake-amount,
.h-invest-stepper {
    display: contents;
}

.h-invest-stake .h-invest-amount-label {
    grid-area: 1 / 1;
}

.h-invest-stake .h-invest-amount-field {
    grid-area: 2 / 1;
    /* Le filet pointillé suit les chiffres, pas la largeur de la colonne. */
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
}

.h-invest-stake .h-invest-stepper-hint {
    grid-area: 1 / 2;
    justify-self: center;
}

.h-invest-stake .h-invest-stepper-control {
    grid-area: 2 / 2;
}

.h-invest-amount-field {
    display: flex;
    align-items: baseline;
    /* L'espace insécable de l'ancien affichage (« 1 000 € »), proportionnelle au corps du montant. */
    gap: 0.22em;
    margin-top: 0.25rem;
    border-bottom: 2px dashed var(--bs-border-color);
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--bs-emphasis-color);
}

.h-invest-amount-field:focus-within {
    border-bottom-style: solid;
    border-bottom-color: var(--bs-primary);
}

/* La largeur suit le texte saisi (homunity.invest.js la mesure) ; 4ch sans script. */
.h-invest-amount-input {
    width: 4ch;
    min-width: 1ch;
    max-width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.h-invest-stepper-control {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-body-bg);
}

.h-invest-stepper-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
    transition: border-color 150ms ease-in-out, color 150ms ease-in-out;
}

.h-invest-stepper-button:hover:not(:disabled),
.h-invest-stepper-button:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.h-invest-stepper-button:disabled {
    color: #A3A3A3;
}

.h-invest-stepper-input {
    width: 3.5rem;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-emphasis-color);
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

.h-invest-stepper-input:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius-sm);
}

/* Même intitulé que « Montant total à investir », sur la même ligne. */
.h-invest-stepper-hint {
    color: var(--bs-tertiary-color);
    font-size: 0.875rem;
}

@media (min-width: 576px) {
    .h-invest-amount-field {
        font-size: 3.5rem;
    }
}

/* Sous 400 px, le montant et le compteur ne tiennent plus côte à côte : une seule colonne, chaque
   intitulé au-dessus de ce qu'il désigne, aligné à gauche. */
@media (max-width: 399.98px) {
    .h-invest-stake {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
    .h-invest-stake .h-invest-amount-label,
    .h-invest-stake .h-invest-amount-field,
    .h-invest-stake .h-invest-stepper-hint,
    .h-invest-stake .h-invest-stepper-control {
        grid-area: auto;
    }
    .h-invest-stake .h-invest-stepper-hint {
        justify-self: start;
        margin-top: 1rem;
    }
}

/* Raccourcis de montant : trois pilules de même largeur. */
.h-invest-shortcuts {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.h-invest-shortcut {
    flex: 1 1 0;
    min-height: 2.25rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
    white-space: nowrap;
    transition: border-color 150ms ease-in-out, color 150ms ease-in-out, background-color 150ms ease-in-out;
}

.h-invest-shortcut:hover,
.h-invest-shortcut:focus-visible {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.h-invest-shortcut[aria-pressed="true"] {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .h-invest-shortcut {
        min-height: 44px;
    }
}

/* Encart de résultat, fond chaud. */
.h-invest-summary {
    margin-top: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-body-bg);
}

.h-invest-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--bs-emphasis-color);
}

.h-invest-summary-row strong {
    font-weight: 500;
    color: var(--bs-success);
    white-space: nowrap;
}

.h-invest-footnotes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.h-invest-footnotes p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--bs-tertiary-color);
}

/* --- Signature ------------------------------------------------------------ */

/* Colonne élargie, réservée à la signature : l'iframe YouSign affiche le bulletin en pleine page. */
.h-invest-shell.h-invest-shell-wide {
    max-width: calc(60rem + 2rem);
}

.h-invest-lead {
    margin: -0.75rem 0 1.5rem;
    color: var(--bs-body-color);
}

.h-invest-signature {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* En mobile, l'iframe occupe toute la largeur de l'écran : elle sort des marges de la colonne. */
@media (max-width: 575.98px) {
    .h-invest-signature {
        margin-inline: -1rem;
        border-inline: 0;
        border-radius: 0;
    }
}

/* --- Récapitulatif et paiement ------------------------------------------- */

.h-invest-amount-primary {
    margin-bottom: 2rem;
    color: var(--bs-primary);
}

.h-invest-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
}

.h-invest-methods > legend {
    float: none;
    width: auto;
}

/* Ligne de moyen de paiement : le bouton radio est masqué, la ligne entière est son libellé. */
.h-invest-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: #FFFFFF;
    transition: border-color 150ms ease-in-out, background-color 150ms ease-in-out;
}

.h-invest-method:hover {
    border-color: var(--bs-primary);
}

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

.h-invest-method:has(.h-invest-method-input:focus-visible) {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.h-invest-method-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Le libellé couvre toute la ligne, hormis le lien de rechargement qui passe au-dessus. */
.h-invest-method-label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    cursor: pointer;
}

.h-invest-method-label::after {
    content: '';
    position: absolute;
    inset: 0;
}

.h-invest-method-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: #FFFFFF;
    color: var(--bs-emphasis-color);
}

.h-invest-method-icon.is-warning {
    border-color: #F1DDBE;
    background-color: #F7EBD8;
    color: #C49A55;
}

.h-invest-method-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

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

.h-invest-method-hint {
    font-size: 0.875rem;
    color: var(--bs-tertiary-color);
}

/* Lien de rechargement : visible seulement quand le portefeuille est choisi. */
.h-invest-recharge {
    position: relative;
    z-index: 1;
    display: none;
    flex: 0 0 auto;
}

.h-invest-method:has(.h-invest-method-input:checked) .h-invest-recharge {
    display: inline-flex;
}

@media (max-width: 575.98px) {
    .h-invest-method {
        flex-wrap: wrap;
    }
    .h-invest-recharge {
        margin-left: 4rem;
        min-height: 44px;
        align-items: center;
    }
}

/* --- Fins de parcours ------------------------------------------------------ */

/* Liste d'attente : encart d'information, fond de la marque. */
.h-invest-notice {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
}

.h-invest-notice p {
    margin: 0;
}

.h-invest-notice p + p {
    margin-top: 0.5rem;
}

.h-invest-notice-title {
    font-weight: 500;
}

.h-invest-total {
    color: var(--bs-primary);
    white-space: nowrap;
}

.h-invest-ibancard {
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 0;
}

/* Sur téléphone, la valeur prend toute la largeur de la carte sous l'intitulé et le bouton :
   à côté du bouton, un IBAN passait sur deux lignes. */
@media (max-width: 575.98px) {
    .h-invest-ibancard .h-dash-ibanrow.is-copyable {
        grid-template-areas:
            "label copy"
            "value value";
    }
}

/* Boutons de fin de parcours, empilés sur toute la largeur de la colonne. */
.h-invest-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ============================================================================
   Pages d'erreur (400, 401, 403, 404, 500, 503, 504) — balisage :
   templates/bundles/TwigBundle/Exception/. Page autonome (sans gabarit
   d'espace client) : en-tête logo + contact, bloc centré sur un grand numéro
   en filigrane, pied de page d'assistance.
   ============================================================================ */

.h-error {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.h-error-header,
.h-error-main,
.h-error-footer {
    position: relative;
    z-index: 1;
}

.h-error-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
}

.h-error-header img {
    display: block;
    width: 104px;
    height: auto;
}

.h-error-contact {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

/* Numéro en filigrane, derrière le titre. */
.h-error-code {
    position: absolute;
    top: 6rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Reckless Neue', Georgia, 'Times New Roman', serif;
    font-size: 11.875rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #EBE4DA;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.h-error-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0 1.25rem 1.5rem;
    text-align: center;
}

.h-error-badge {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    background-color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.h-error-title {
    max-width: 820px;
    margin: 0;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.08;
}

.h-error-text {
    max-width: 560px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.h-error-actions {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.h-error-footer {
    padding: 0 1.25rem 1.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
    color: #5E5E5E;
}

@media (min-width: 768px) {
    .h-error-header {
        padding: 1.75rem 4rem;
    }

    .h-error-header img {
        width: 132px;
    }

    .h-error-contact {
        font-size: 0.9375rem;
    }

    .h-error-code {
        top: 7rem;
        font-size: 28.75rem;
    }

    .h-error-main {
        gap: 1.5rem;
        padding: 0 4rem 4.5rem;
    }

    .h-error-badge {
        height: 1.875rem;
        padding: 0 0.875rem;
    }

    .h-error-title {
        font-size: 3.75rem;
        line-height: 1.05;
    }

    .h-error-text {
        font-size: 1.125rem;
    }

    .h-error-actions {
        flex-direction: row;
        align-self: center;
        gap: 0.75rem;
    }

    .h-error-footer {
        padding: 0 4rem 2rem;
    }
}