html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Réserve de BAS DE PAGE du back-office — la SEULE de l'application, éditeur de questionnaire compris.
   Sans elle, le document s'arrête au pixel près sur la dernière carte : défilé à fond, le retour d'une
   action rendue dans cette carte reste collé au bord bas de l'écran (mesuré à 39 px de marge sur la carte
   « Logo » d'Apparence, en 390 px), et rien — pas même crmUi.ensureVisible — ne peut le remonter, faute
   de course de défilement restante. La marge sous le retour suit cette réserve pixel pour pixel :
   102 px mesurés en 390 px (scénario 8), contre 39 px avant ce correctif.
   Elle doit rester SUPÉRIEURE à la hauteur de la barre d'enregistrement fixe de l'éditeur (.qe-savebar,
   ≈ 58 px mesurés) : c'est elle, désormais, qui dégage la dernière carte de derrière la barre. L'éditeur
   portait en plus sa propre réserve (.qe-savebar-gap) : les deux s'additionnaient, et laissaient 192 px
   de vide sous la dernière carte. */
.content {
    padding-top: 1.1rem;
    padding-bottom: 5.5rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.crm-badge-fragile, .crm-badge-perfectible, .crm-badge-solide {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.crm-badge-fragile {
    background-color: #fbdcdc;
    color: #8a1f1f;
}

.crm-badge-perfectible {
    background-color: #fde3c4;
    color: #8a4b0f;
}

.crm-badge-solide {
    background-color: #d7f0dc;
    color: #1e6b31;
}

.crm-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: #e3e6ea;
    color: #6c757d;
    font-size: 0.8rem;
    font-weight: 600;
}

.crm-step-done {
    background-color: #142850;
    color: #fff;
}

/* Aide contextuelle du back-office (composant OwnerHelp) : bouton « ? » + popup <dialog>. */
.owner-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent, #e03535);
    background: transparent;
    color: var(--accent, #e03535);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.owner-help:hover, .owner-help:focus-visible {
    background: var(--accent, #e03535);
    color: #fff;
    outline: none;
}

.owner-help-dialog {
    width: min(1080px, calc(100vw - 3rem));
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--border, #e2e2e2);
    border-radius: 12px;
    background: var(--surface, #fff);
    color: var(--body, #1e1e1e);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    /* Colonne : en-tête et pied fixes, seul le corps défile (verticalement). */
    flex-direction: column;
}

/* display:flex UNIQUEMENT à l'ouverture. Une règle auteur bat, par origine, la règle
   navigateur « dialog:not([open]){display:none} » : poser display sur la base ferait
   apparaître le panneau FERMÉ (rendu dans le DOM, ouvert par showModal) sur chaque page. */
.owner-help-dialog[open] {
    display: flex;
}

/* Zone de défilement vertical : elle borne la hauteur, jamais le corps multi-colonnes
   lui-même — un bloc multi-colonnes à hauteur bornée déborderait horizontalement. */
.owner-help-dialog .ohd-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.owner-help-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.owner-help-dialog .ohd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border, #e2e2e2);
    flex-shrink: 0;
}

.owner-help-dialog .ohd-head h2 {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-size: 1.15rem;
    color: var(--text, #1e1e1e);
}

.owner-help-dialog .ohd-x {
    border: none;
    background: transparent;
    color: var(--muted, #9a9a9a);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem;
}

.owner-help-dialog .ohd-x:hover {
    color: var(--body, #1e1e1e);
}

.owner-help-dialog .ohd-body {
    padding: 1.1rem 1.5rem 1.4rem;
    font-size: 0.92rem;
    line-height: 1.5;
    /* Le contenu coule sur plusieurs colonnes pour occuper la largeur : une seule sur
       mobile, deux (ou plus) dès que la fenêtre est large. Hauteur laissée libre —
       c'est .ohd-scroll qui défile. */
    columns: 25rem;
    column-gap: 2.75rem;
}

.owner-help-dialog .ohd-body h3 {
    margin: 1.25rem 0 0.5rem;
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    color: var(--accent, #e03535);
    /* Ne pas séparer un titre du début de son contenu en bas de colonne. */
    break-after: avoid;
    break-inside: avoid;
}

.owner-help-dialog .ohd-body h3:first-child {
    margin-top: 0;
}

.owner-help-dialog .ohd-body p {
    margin: 0 0 0.7rem;
    break-inside: avoid;
}

.owner-help-dialog .ohd-body ul,
.owner-help-dialog .ohd-body ol {
    margin: 0 0 0.7rem;
    padding-left: 1.2rem;
}

.owner-help-dialog .ohd-body li {
    margin-bottom: 0.35rem;
    /* Une puce n'est jamais coupée en deux entre deux colonnes ; la liste, elle,
       peut se poursuivre dans la colonne suivante. */
    break-inside: avoid;
}

/* Marche à suivre de mise en service : numérotée, un peu détachée. */
.owner-help-dialog .ohd-body ol {
    padding-left: 1.4rem;
}

.owner-help-dialog .ohd-body ol > li {
    margin-bottom: 0.5rem;
}

.owner-help-dialog .ohd-body code {
    background: var(--surface-2, #fafafa);
    border: 1px solid var(--border, #e2e2e2);
    border-radius: 4px;
    padding: 0 0.25rem;
    font-size: 0.85em;
}

.owner-help-dialog .ohd-foot {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border, #e2e2e2);
    text-align: right;
    flex-shrink: 0;
}

.owner-help-dialog .ohd-close {
    border: 1px solid var(--accent, #e03535);
    background: var(--accent, #e03535);
    color: #fff;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- Éditeur de questionnaire : barre d'enregistrement fixe -----------------------------------
   Le seul bouton « Enregistrer » de l'écran, et le seul canal de retour. Fixée en bas : l'écran fait
   plusieurs milliers de pixels, un message rendu en haut du document n'était vu de personne.
   Empilement : la boîte de confirmation (1050/1055) et le bandeau d'erreur (1000) doivent rester
   AU-DESSUS d'elle — d'où un z-index volontairement bas. */
.qe-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.5rem;
    background: #fff;
    border-top: 1px solid var(--border, #e2e2e2);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
}

/* Même décrochage que le contenu : la barre fait la largeur de la zone de travail, pas de la fenêtre. */
@media (min-width: 641px) {
    .qe-savebar {
        left: 250px;
    }
}

.qe-savebar .qe-status {
    flex: 1;
    min-width: 0;
}

/* Avec le bouton « Traduire les textes manquants », les boutons ne tiennent plus toujours à côté de
   l'état : à 390 px, l'état était écrasé à zéro et son texte passait SOUS les boutons (mesuré par le
   harnais, capture 20-barre-du-bas). La barre passe donc à la ligne quand la place manque : l'état
   garde une largeur lisible, les boutons descendent ensemble et restent calés à droite. Sur une zone
   large, rien ne change (une seule rangée). */
.qe-savebar {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.qe-savebar .qe-status {
    flex: 1 1 16rem;
}

.qe-savebar .qe-status + .btn {
    margin-left: auto;
}

/* Réserve de bas de page de l'éditeur = hauteur RÉELLE de la barre (publiée par crmUi.trackSavebar) +
   une marge, jamais moins que la réserve commune. Sur deux rangées ou avec un message long, la barre
   dépassait les 5.5rem fixes (mesuré par le harnais, scénario 20 : 89 à 205 px entre 641 et 1024 px) et
   la dernière carte passait dessous. */
.content:has(.qe-savebar) {
    padding-bottom: max(5.5rem, calc(var(--qe-savebar-h, 0px) + 1.5rem));
}

/* Sur téléphone, boutons au format compact : les deux tiennent alors sur UNE rangée sous l'état, et la
   barre reste plus basse que la réserve de bas de page (.content). */
@media (max-width: 575.98px) {
    .qe-savebar .btn {
        font-size: 0.875rem;
        padding: 0.3rem 0.65rem;
    }
}

/* Un avertissement n'est pas une erreur : ambre lisible sur fond blanc (Bootstrap 5.2 n'a pas
   d'« emphasis » pour cette teinte). */
.qe-savebar .qe-warn {
    color: #8a6100;
}

/* Lignes de réponse de l'éditeur, sur écran étroit. Libellé, points, case « neutre », flèches et
   « Suppr. » tiennent sur UNE rangée : à 390 px, la rangée déborde du document (mesuré par le harnais :
   scrollWidth 413 pour clientWidth 390, le bouton « Suppr. » commençant à x = 412). Un débordement
   horizontal ne fait pas que déborder : il élargit la zone de mise en page, et la barre
   d'enregistrement — ancrée au bas de CETTE zone — passe sous ce que l'utilisateur voit. « Enregistrer »
   devenait inatteignable au doigt. Sous 576 px, la rangée passe donc à la ligne. */
@media (max-width: 575.98px) {
    .qe-choice-row {
        flex-wrap: wrap;
    }
}

/* Bloc « Traductions » de l'éditeur (lot 11) : un filet à gauche rattache visuellement les champs
   traduits au texte français qu'ils traduisent, sans les enfermer dans une carte de plus. Aucune
   classe Bootstrap de mise en page n'est employée ici : trois sélecteurs stricts du harnais comptent
   « form-control-sm », « border-bottom » et « d-flex align-items-center gap-2 » dans ces zones. */
.qe-tr-body {
    border-left: 3px solid var(--bs-border-color);
    padding-left: .75rem;
}

.qe-tr-field {
    margin-bottom: .5rem;
}

/* Marque « Proposition automatique — à relire » sous une case remplie par la traduction automatique.
   Même ambre que les avertissements de la barre : Bootstrap 5.1 n'a pas « text-warning-emphasis »,
   la classe reste posée pour le jour où il l'aura, la teinte vient d'ici. */
.qe-tr-auto-note {
    color: #8a6100;
}

/* Ligne d'un témoignage (lot 13d) : son filet est posé ici et non par « border-bottom », classe que le
   harnais compte sous la carte des offres. */
.qe-testimonial {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/* --- Fiche prospect : en-tête et rangée d'actions ---------------------------------------------
   L'en-tête porte le nom du prospect et jusqu'à CINQ actions (« Nouveau parcours », « Modifier »,
   « Archiver », « Retour à la liste », « Supprimer ») sur une rangée que rien ne faisait passer à la
   ligne : à 390 px, la rangée mesurait 471 px et poussait le document à 547 px pour 390 px de fenêtre
   (mesuré par le harnais, scénario 5). Un débordement horizontal ne fait pas que déborder : la boîte de
   confirmation d'archivage est posée sur un document PLUS LARGE que la fenêtre, et le clic ne tombe plus
   sur le bouton visé — l'archivage depuis la fiche était impossible au doigt, et le harnais avait dû
   déclarer l'aller-retour « desktop seulement ». Sous 576 px, le titre et les actions s'empilent, et les
   actions passent à la ligne.
   L'alignement vertical est porté ICI, et non par l'utilitaire `align-items-center` : les utilitaires
   Bootstrap sont en `!important`, une règle d'auteur ne les défait pas. */
.pd-header {
    align-items: center;
}

@media (max-width: 575.98px) {
    .pd-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .pd-actions {
        flex-wrap: wrap;
    }
}

/* --- Bandeau d'erreur Blazor ------------------------------------------------------------------
   `#blazor-error-ui` est rendu par CHAQUE mise en page (MainLayout, FocusedLayout) : la règle qui le
   masque doit donc être GLOBALE. Tant qu'elle vivait dans MainLayout.razor.css — un CSS scopé — le
   bundle publié la sortait en `#blazor-error-ui[b-xxxxxxxxxx]`, portée de MainLayout seule : la copie
   rendue par FocusedLayout n'était jamais atteinte, et les écrans de création et de modification
   affichaient « Une erreur est survenue. » en permanence. Effet symétrique, plus grave : une VRAIE
   erreur y devenait invisible, le bandeau étant déjà là. Valeurs inchangées, z-index 1000 conservé
   (la barre d'enregistrement de l'éditeur est à 900, les boîtes de confirmation à 1050/1055). */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}