/* ==========================================================================
   HabilCheck — styles de l'application
   Thème choisi par l'attribut data-hc-theme de <html> ("clair" par défaut, "sombre").
   Les composants DevExpress suivent le thème Fluent enregistré dans App.razor
   (Theming/ThemesHabilCheck.cs) : même accent vert sapin.
   ========================================================================== */

/* --- Polices (auto-hébergées, licence SIL OFL : fonts/OFL.txt) ------------ */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* --- Jetons de couleur ---------------------------------------------------- */
:root,
:root[data-hc-theme="clair"] {
    color-scheme: light;

    --hc-police: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --hc-police-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --hc-fond: #EFEBE3;
    --hc-surface: #FFFDF8;
    --hc-surface-2: #F7F2E9;
    --hc-entete: #EEE7DA;
    --hc-bordure: #D8D0C1;
    --hc-bordure-forte: #958B78;
    --hc-texte: #1A1712;
    --hc-texte-2: #3D382F;
    --hc-texte-3: #5A5347;
    --hc-survol-ligne: #F6EFE2;

    --hc-accent: #1F5C4A;
    --hc-accent-survol: #174638;
    --hc-accent-doux: #DCEBE4;
    --hc-accent-texte: #1F5C4A;
    --hc-lien: #1F5C4A;
    --hc-anneau: #1F5C4A;

    --hc-menu-fond: #E3DACA;
    --hc-menu-texte: #1A1712;
    --hc-menu-texte-2: #4A4337;
    --hc-menu-bordure: #CDC1AB;
    --hc-menu-carte: #EDE6D9;
    --hc-menu-actif: #1F5C4A;
    --hc-menu-actif-texte: #FFFFFF;
    --hc-menu-survol: rgba(26, 23, 18, .07);

    --hc-ok-fond: #DDF3C9;
    --hc-ok-texte: #2F5F0A;
    --hc-ok-bordure: #7DBB45;
    --hc-alerte-fond: #FDE7B0;
    --hc-alerte-texte: #7A3A00;
    --hc-alerte-bordure: #E0A21B;
    --hc-ko-fond: #FAD4D0;
    --hc-ko-texte: #8E1414;
    --hc-ko-bordure: #D9534F;
}

:root[data-hc-theme="sombre"] {
    color-scheme: dark;

    --hc-fond: #0B0E13;
    --hc-surface: #151A22;
    --hc-surface-2: #1C222C;
    --hc-entete: #1A2029;
    --hc-bordure: #313946;
    --hc-bordure-forte: #5A6476;
    --hc-texte: #F2F4F8;
    --hc-texte-2: #C8CFDA;
    --hc-texte-3: #A6AFBD;
    --hc-survol-ligne: #1F2631;

    --hc-accent: #2E7A62;
    --hc-accent-survol: #35896E;
    --hc-accent-doux: #18302A;
    --hc-accent-texte: #9ED8C0;
    --hc-lien: #8FD3B6;
    --hc-anneau: #8FD3B6;

    --hc-menu-fond: #10141A;
    --hc-menu-texte: #E9EDF3;
    --hc-menu-texte-2: #A6AFBD;
    --hc-menu-bordure: #262D38;
    --hc-menu-carte: #171C24;
    --hc-menu-actif: #235C4B;
    --hc-menu-actif-texte: #FFFFFF;
    --hc-menu-survol: rgba(255, 255, 255, .09);

    --hc-ok-fond: #1F3311;
    --hc-ok-texte: #B5E68A;
    --hc-ok-bordure: #4F7F24;
    --hc-alerte-fond: #3A2C0E;
    --hc-alerte-texte: #FFD966;
    --hc-alerte-bordure: #A67C1A;
    --hc-ko-fond: #43191C;
    --hc-ko-texte: #FFA8A8;
    --hc-ko-bordure: #B23A40;
}

/* Bootstrap (pages de compte du modèle) aligné sur nos couleurs. */
:root,
:root[data-bs-theme] {
    --bs-body-bg: var(--hc-fond);
    --bs-body-color: var(--hc-texte);
    --bs-secondary-color: var(--hc-texte-3);
    --bs-border-color: var(--hc-bordure-forte);
    --bs-link-color: var(--hc-lien);
    --bs-link-color-rgb: 31, 92, 74;
    --bs-link-hover-color: var(--hc-accent-survol);
    --bs-font-sans-serif: var(--hc-police);
}

/* --- Base ----------------------------------------------------------------- */
html,
body {
    margin: 0;
    background: var(--hc-fond);
    color: var(--hc-texte);
    font-family: var(--hc-police);
    font-size: 15px;
    line-height: 1.5;
}

a,
.btn-link {
    color: var(--hc-lien);
}

h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

h1:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--hc-anneau);
    outline-offset: 2px;
}

.hc-mono {
    font-family: var(--hc-police-mono);
}

.hc-visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hc-icone {
    flex-shrink: 0;
}

/* --- Mise en page ---------------------------------------------------------- */
.hc-app {
    display: flex;
    min-height: 100vh;
}

.hc-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 248px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px;
    background: var(--hc-menu-fond);
    color: var(--hc-menu-texte);
    border-right: 1px solid var(--hc-menu-bordure);
}

.hc-main {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 28px 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Marque */
.hc-marque {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hc-marque__lien {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    color: inherit;
    text-decoration: none;
}

.hc-marque__nom {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.hc-menu-case,
.hc-menu-bouton {
    display: none;
}

.hc-menu-contenu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

/* Navigation */
.hc-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.hc-nav__lien {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--hc-menu-texte-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.hc-nav__lien:hover {
    background: var(--hc-menu-survol);
    color: var(--hc-menu-texte);
}

.hc-nav__lien.active {
    background: var(--hc-menu-actif);
    color: var(--hc-menu-actif-texte);
    font-weight: 600;
}

/* Bloc utilisateur */
.hc-utilisateur {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px 0;
    border-top: 1px solid var(--hc-menu-bordure);
}

.hc-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--hc-menu-actif);
    color: var(--hc-menu-actif-texte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.hc-utilisateur__infos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hc-utilisateur__nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-menu-texte);
    text-decoration: none;
}

.hc-lien-discret {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--hc-menu-texte-2);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

/* Bouton carré à icône (bascule de thème, menu) */
.hc-bouton-icone {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--hc-menu-bordure);
    background: var(--hc-menu-carte);
    color: var(--hc-menu-texte);
    cursor: pointer;
}

.hc-bouton-icone:hover {
    background: var(--hc-menu-survol);
}

/* Petits écrans : barre en haut, menu repliable */
@media (max-width: 860px) {
    .hc-app {
        flex-direction: column;
    }

    .hc-sidebar {
        position: static;
        width: auto;
        height: auto;
        padding: 10px 16px;
        gap: 0;
        border-right: 0;
        border-bottom: 1px solid var(--hc-menu-bordure);
    }

    .hc-menu-bouton {
        display: inline-flex;
    }

    .hc-menu-contenu {
        display: none;
        padding-top: 12px;
    }

    .hc-sidebar:has(.hc-menu-case:checked) .hc-menu-contenu {
        display: flex;
    }

    .hc-main {
        padding: 20px 16px 40px;
    }
}

/* --- Éléments de page ------------------------------------------------------ */
.hc-entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.hc-sous-titre {
    margin: 4px 0 0;
    color: var(--hc-texte-2);
    font-size: 15px;
}

.hc-carte {
    background: var(--hc-surface);
    border: 1px solid var(--hc-bordure);
    border-radius: 12px;
}

.hc-vide {
    padding: 24px;
}

/* Indicateurs */
.hc-indicateurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.hc-indicateur {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: var(--hc-surface);
    border: 1px solid var(--hc-bordure);
    border-radius: 12px;
}

.hc-indicateur__icone {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hc-indicateur__icone--neutre { background: var(--hc-accent-doux); color: var(--hc-accent-texte); }
.hc-indicateur__icone--ok { background: var(--hc-ok-fond); color: var(--hc-ok-texte); }
.hc-indicateur__icone--alerte { background: var(--hc-alerte-fond); color: var(--hc-alerte-texte); }
.hc-indicateur__icone--ko { background: var(--hc-ko-fond); color: var(--hc-ko-texte); }

.hc-indicateur__valeur {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.hc-indicateur__libelle {
    font-size: 14px;
    color: var(--hc-texte-2);
}

/* Pastilles de statut */
.hc-statut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.hc-statut--ok { background: var(--hc-ok-fond); color: var(--hc-ok-texte); border-color: var(--hc-ok-bordure); }
.hc-statut--alerte { background: var(--hc-alerte-fond); color: var(--hc-alerte-texte); border-color: var(--hc-alerte-bordure); }
.hc-statut--ko { background: var(--hc-ko-fond); color: var(--hc-ko-texte); border-color: var(--hc-ko-bordure); }

/* --- Matrice --------------------------------------------------------------- */
.hc-matrice-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.hc-matrice-carte {
    flex: 999 1 640px;
    min-width: 0;
    overflow: hidden;
}

.hc-legende {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--hc-bordure);
    font-size: 13px;
}

.hc-legende__elements {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--hc-texte-2);
}

.hc-legende__elements > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hc-legende__aide {
    color: var(--hc-texte-3);
}

.hc-pastille {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.hc-pastille--ok { background: var(--hc-ok-bordure); }
.hc-pastille--alerte { background: var(--hc-alerte-bordure); }
.hc-pastille--ko { background: var(--hc-ko-bordure); }

.hc-matrice-defilement {
    overflow-x: auto;
}

.hc-matrice {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.hc-matrice th,
.hc-matrice td {
    padding: 8px;
    border-bottom: 1px solid var(--hc-bordure);
    background: var(--hc-surface);
    text-align: left;
    vertical-align: middle;
}

.hc-matrice thead th {
    padding: 12px 10px;
    background: var(--hc-entete);
    color: var(--hc-texte-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hc-matrice thead th.hc-matrice__type {
    min-width: 124px;
    color: var(--hc-texte);
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: 500;
}

.hc-matrice tbody tr:hover > * {
    background: var(--hc-survol-ligne);
}

/* Première colonne fixe pendant le défilement horizontal */
.hc-matrice .hc-matrice__ressource {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 220px;
    padding-left: 18px;
    font-weight: 400;
}

.hc-ressource {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hc-ressource__avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--hc-accent-doux);
    color: var(--hc-accent-texte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.hc-ressource__avatar--equipement {
    border-radius: 8px;
}

.hc-ressource__texte {
    display: flex;
    flex-direction: column;
}

.hc-ressource__nom {
    font-size: 15px;
    font-weight: 600;
    color: var(--hc-texte);
}

.hc-ressource__groupe {
    font-size: 13px;
    color: var(--hc-texte-3);
}

/* Cellules */
.hc-cellule {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: 8px;
    border: 1px solid;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hc-cellule--ok { background: var(--hc-ok-fond); border-color: var(--hc-ok-bordure); --hc-cellule-encre: var(--hc-ok-texte); }
.hc-cellule--alerte { background: var(--hc-alerte-fond); border-color: var(--hc-alerte-bordure); --hc-cellule-encre: var(--hc-alerte-texte); }
.hc-cellule--ko { background: var(--hc-ko-fond); border-color: var(--hc-ko-bordure); --hc-cellule-encre: var(--hc-ko-texte); }

.hc-cellule--choisie {
    box-shadow: 0 0 0 2px var(--hc-anneau);
}

.hc-cellule__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hc-police-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--hc-texte);
}

.hc-cellule__date .hc-icone {
    color: var(--hc-cellule-encre);
}

.hc-cellule__delai {
    font-size: 12px;
    font-weight: 600;
    color: var(--hc-cellule-encre);
}

.hc-cellule-vide {
    text-align: center !important;
    color: var(--hc-texte-3);
}

/* Panneau de détail */
.hc-detail {
    flex: 1 1 300px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.hc-detail__code {
    font-size: 13px;
    color: var(--hc-texte-3);
}

.hc-detail__titre {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.hc-detail__infos {
    width: 100%;
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.hc-detail__infos dt {
    font-size: 12px;
    font-weight: 400;
    color: var(--hc-texte-3);
}

.hc-detail__infos dd {
    margin: 0;
    font-size: 14px;
}

.hc-detail__note {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--hc-texte-2);
}

/* --- Modèle Blazor / Identity (conservé) ---------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--hc-accent);
    --bs-btn-border-color: var(--hc-accent);
    --bs-btn-hover-bg: var(--hc-accent-survol);
    --bs-btn-hover-border-color: var(--hc-accent-survol);
    --bs-btn-active-bg: var(--hc-accent-survol);
    --bs-btn-active-border-color: var(--hc-accent-survol);
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-color: #FFFFFF;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--hc-surface), 0 0 0 0.25rem var(--hc-anneau);
}

.form-control,
.form-select {
    background-color: var(--hc-surface);
    color: var(--hc-texte);
    border-color: var(--hc-bordure-forte);
}

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

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

.invalid {
    outline: 1px solid var(--hc-ko-bordure);
}

.validation-message {
    color: var(--hc-ko-texte);
}

.darker-border-checkbox.form-check-input {
    border-color: var(--hc-bordure-forte);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    background: var(--hc-ko-fond);
    border: 1px solid var(--hc-ko-bordure);
    color: var(--hc-ko-texte);
}

.blazor-error-boundary::after {
    content: "Une erreur s'est produite.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    padding: .7rem 1.25rem;
    background: var(--hc-alerte-fond);
    color: var(--hc-alerte-texte);
    border-top: 1px solid var(--hc-alerte-bordure);
}

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

/* --- Listes, fiches et formulaires ---------------------------------------- */
.hc-carte--grille {
    padding: 4px;
    overflow: hidden;
}

.hc-grille .dxbl-grid-table > tbody > tr {
    cursor: pointer;
}

a.hc-ressource__nom {
    text-decoration: none;
}

a.hc-ressource__nom:hover {
    text-decoration: underline;
}

.hc-detail__lien {
    margin-top: 6px;
    font-weight: 600;
    text-decoration: none;
}

.hc-fil {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--hc-texte-3);
    margin-bottom: -12px;
}

.hc-fil a {
    text-decoration: none;
}

.hc-fiche-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.hc-ressource__avatar--grand {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.hc-etiquette {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--hc-surface-2);
    border: 1px solid var(--hc-bordure-forte);
    color: var(--hc-texte-2);
    font-size: 12px;
    font-weight: 600;
}

.hc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hc-carte__titre {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hc-bordure);
    font-size: 17px;
    font-weight: 600;
}

.hc-carte__vide {
    margin: 0;
    padding: 20px;
    color: var(--hc-texte-2);
}

.hc-tableau-defilement {
    overflow-x: auto;
}

.hc-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.hc-tableau th,
.hc-tableau td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--hc-bordure);
    text-align: left;
    vertical-align: middle;
}

.hc-tableau tbody tr:last-child > * {
    border-bottom: 0;
}

.hc-tableau thead th {
    background: var(--hc-entete);
    color: var(--hc-texte-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hc-tableau tbody tr:hover > * {
    background: var(--hc-survol-ligne);
}

.hc-tableau__code {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.hc-tableau__libelle {
    display: block;
    color: var(--hc-texte-2);
    font-size: 13px;
}

.hc-tableau__actions {
    white-space: nowrap;
    text-align: right !important;
}

.hc-tableau--historique {
    color: var(--hc-texte-2);
}

.hc-actions-popup {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.hc-aide {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--hc-texte-2);
}

.hc-erreur {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--hc-ko-fond);
    border: 1px solid var(--hc-ko-bordure);
    color: var(--hc-ko-texte);
    font-size: 14px;
}

.hc-validation,
.validation-errors {
    margin: 12px 0 0;
    padding-left: 18px;
    color: var(--hc-ko-texte);
    font-size: 13px;
}


/* --- Entreprise courante, bandeaux, comptes ------------------------------- */
.hc-entreprise {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--hc-menu-bordure);
    background: var(--hc-menu-carte);
}

.hc-entreprise__nom {
    font-size: 14px;
    font-weight: 600;
    color: var(--hc-menu-texte);
}

.hc-entreprise__role {
    font-size: 12px;
    color: var(--hc-menu-texte-2);
}

.hc-entreprise__changer {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hc-menu-texte);
}

.hc-bandeau {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid;
    font-size: 14px;
}

.hc-bandeau .hc-icone {
    margin-top: 2px;
}

.hc-bandeau--info { background: var(--hc-accent-doux); border-color: var(--hc-accent); color: var(--hc-accent-texte); }
.hc-bandeau--alerte { background: var(--hc-alerte-fond); border-color: var(--hc-alerte-bordure); color: var(--hc-alerte-texte); }
.hc-bandeau--ko { background: var(--hc-ko-fond); border-color: var(--hc-ko-bordure); color: var(--hc-ko-texte); }

.hc-choix-entreprises {
    display: flex;
    flex-direction: column;
}

.hc-choix-entreprise {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hc-bordure);
}

.hc-choix-entreprise:last-child {
    border-bottom: 0;
}

.hc-formulaire-compte {
    max-width: 520px;
    padding: 24px;
}

.hc-formulaire-compte__titre {
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.hc-formulaire-compte__bas {
    margin: 16px 0 0;
    text-align: center;
}

.hc-tableau__role {
    min-width: 220px;
}

/* --- Pages publiques du compte (AccueilLayout) ----------------------------- */
:root,
:root[data-hc-theme="clair"] {
    --ac-marque-fond: linear-gradient(160deg, #1F5C4A 0%, #174638 70%, #12392D 100%);
    --ac-essai-fond: #E3DACA;
    --ac-essai-bord: #CDC1AB;
}

:root[data-hc-theme="sombre"] {
    --ac-marque-fond: linear-gradient(160deg, #173F33 0%, #102C24 70%, #0B1F19 100%);
    --ac-essai-fond: var(--hc-surface);
    --ac-essai-bord: var(--hc-bordure);
}

.ac {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* Panneau de présentation */
.ac-marque {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 56px;
    background: var(--ac-marque-fond);
    color: #FFFFFF;
}

.ac-marque > * {
    position: relative;
}

.ac-marque__cercles {
    position: absolute !important;
    right: -180px;
    bottom: -200px;
    opacity: .10;
}

.ac-marque__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    color: #FFFFFF !important;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.ac-sable {
    color: #E3DACA;
}

.ac-marque__message {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
}

.ac-marque__titre {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.ac-marque__texte {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: #D9E6E0;
}

.ac-atouts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
}

.ac-atouts li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ac-atouts__icone {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(227, 218, 202, .16);
    color: #E3DACA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ac-apercu {
    align-self: flex-start;
    width: 100%;
    max-width: 440px;
}

.ac-apercu__carte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #FFFDF8;
    color: #1A1712;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}

.ac-apercu__entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ac-apercu__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #DCEBE4;
    color: #1F5C4A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.ac-apercu__nom {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #5A5347;
}

.ac-apercu__nom strong {
    font-size: 15px;
    color: #1A1712;
}

.ac-apercu__ligne {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 13px;
    font-weight: 500;
}

.ac-apercu__ligne span:last-child {
    font-size: 12px;
    font-weight: 600;
}

.ac-apercu__ligne--ok { background: #DDF3C9; border-color: #7DBB45; }
.ac-apercu__ligne--ok span:last-child { color: #2F5F0A; }
.ac-apercu__ligne--alerte { background: #FDE7B0; border-color: #E0A21B; }
.ac-apercu__ligne--alerte span:last-child { color: #7A3A00; }

.ac-apercu__pastille {
    position: absolute;
    right: -24px;
    top: -18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #E3DACA;
    color: #1A1712;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

.ac-marque__confiance {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 13px;
    color: #C3D6CD;
}

/* Zone du formulaire */
.ac-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 72px 48px 40px;
}

.ac-outils {
    position: absolute;
    top: 20px;
    right: 24px;
}

.ac-entete-mobile {
    display: none;
}

.ac-contenu {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ac-titre h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.ac-titre p {
    margin: 0;
    color: var(--hc-texte-2);
}

.ac-formulaire {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ac-section {
    margin: 6px 0 -4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hc-texte-3);
}

.ac-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-libelle {
    font-size: 14px;
    font-weight: 500;
}

.ac-facultatif {
    font-weight: 400;
    color: var(--hc-texte-3);
}

.ac-libelle-ligne {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.ac-libelle-ligne a {
    font-weight: 600;
    text-decoration: none;
}

.ac-champ {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--hc-bordure-forte);
    background: var(--hc-surface);
    color: var(--hc-texte-3);
}

.ac-champ--mot-de-passe {
    padding-right: 4px;
}

.ac-champ:focus-within {
    outline: 2px solid var(--hc-anneau);
    outline-offset: 2px;
}

.ac-champ input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--hc-texte);
    font: inherit;
    font-size: 15px;
}

.ac-champ input.invalid {
    outline: none;
}

.ac-groupe:has(input.invalid) .ac-champ {
    border-color: var(--hc-ko-bordure);
}

.ac-oeil {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hc-texte-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ac-oeil:hover {
    background: var(--hc-accent-doux);
}

.ac-validation,
.ac-groupe .validation-message {
    font-size: 13px;
    color: var(--hc-ko-texte);
}

.ac-aide {
    font-size: 13px;
    color: var(--hc-texte-3);
}

.ac-case {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--hc-texte-2);
    cursor: pointer;
}

.ac-case input {
    width: 18px;
    height: 18px;
    accent-color: var(--hc-accent);
}

.ac-bouton-principal {
    height: 50px;
    border: 0;
    border-radius: 10px;
    background: var(--hc-accent);
    color: #FFFFFF;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

.ac-bouton-principal:hover {
    background: var(--hc-accent-survol);
}

.ac-bouton-lien {
    align-self: center;
    border: 0;
    background: none;
    color: var(--hc-lien);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ac-separateur {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--hc-texte-3);
}

.ac-separateur::before,
.ac-separateur::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hc-bordure);
}

.ac-essai {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: 12px;
    background: var(--ac-essai-fond);
    border: 1px solid var(--ac-essai-bord);
    font-size: 14px;
    color: var(--hc-texte-2);
}

.ac-essai strong {
    font-size: 15px;
    color: var(--hc-texte);
}

.ac-bouton-secondaire {
    align-self: flex-start;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid var(--hc-accent);
    color: var(--hc-accent-texte) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.ac-bouton-secondaire:hover {
    background: var(--hc-accent-doux);
}

.ac-pied {
    margin: 0;
    font-size: 14px;
    color: var(--hc-texte-2);
    text-align: center;
}

/* Mobile : formulaire seul, accroche au-dessus */
@media (max-width: 900px) {
    .ac {
        grid-template-columns: 1fr;
    }

    .ac-marque {
        display: none;
    }

    .ac-zone {
        justify-content: flex-start;
        align-items: stretch;
        padding: 20px 16px 32px;
    }

    .ac-outils {
        top: 16px;
        right: 16px;
    }

    .ac-entete-mobile {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-right: 56px;
    }

    .ac-entete-mobile__logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--hc-texte) !important;
        font-size: 20px;
        font-weight: 700;
        text-decoration: none;
    }

    .ac-entete-mobile p {
        margin: 0;
        font-size: 22px;
        font-weight: 700;
        line-height: 1.25;
    }

    .ac-accent {
        color: var(--hc-accent-texte);
    }

    .ac-contenu {
        max-width: none;
    }
}

.hc-tableau__groupes {
    min-width: 240px;
}

/* --- Double authentification ---------------------------------------------- */
.hc-etapes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
    padding-left: 20px;
}

.hc-etapes li::marker {
    font-weight: 700;
    color: var(--hc-accent-texte);
}

.hc-qr-2fa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
}

.hc-qr-2fa__image {
    padding: 10px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--hc-bordure);
    line-height: 0;
}

.hc-qr-2fa__cle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.hc-qr-2fa__cle kbd {
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--hc-surface-2);
    border: 1px solid var(--hc-bordure);
    color: var(--hc-texte);
    font-size: 15px;
    letter-spacing: .04em;
}

.hc-form-2fa {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
    margin-top: 12px;
}

.hc-codes-secours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-width: 640px;
    margin: 16px 0;
}

.hc-codes-secours code {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--hc-surface);
    border: 1px solid var(--hc-bordure);
    color: var(--hc-texte);
    font-size: 15px;
    text-align: center;
}

/* --- Paramètres ------------------------------------------------------------ */
.hc-reglages__corps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px 20px;
}

.hc-cases {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.hc-cases legend {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.hc-actions--formulaire {
    margin-top: 4px;
}

/* --- Justificatifs -------------------------------------------------------- */
.hc-bouton-justificatifs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--hc-bordure);
    background: var(--hc-surface);
    color: var(--hc-texte-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.hc-bouton-justificatifs:hover {
    border-color: var(--hc-accent);
    color: var(--hc-accent-texte);
}

.hc-bouton-justificatifs--manquant {
    border-style: dashed;
    border-color: var(--hc-alerte-bordure);
    color: var(--hc-alerte-texte);
}

.hc-justificatifs {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--hc-bordure);
    border-radius: 10px;
}

.hc-justificatifs__ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hc-bordure);
}

.hc-justificatifs__ligne:last-child {
    border-bottom: 0;
}

.hc-justificatifs__icone {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--hc-accent-doux);
    color: var(--hc-accent-texte);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hc-justificatifs__texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hc-justificatifs__texte a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.hc-justificatifs__action {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--hc-texte-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hc-justificatifs__action:hover {
    background: var(--hc-survol-ligne);
    color: var(--hc-texte);
}

.hc-justificatifs__vide {
    margin: 0 0 16px;
    padding: 16px;
    border-radius: 10px;
    border: 1px dashed var(--hc-bordure-forte);
    color: var(--hc-texte-2);
    text-align: center;
}

.hc-depot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    border: 2px dashed var(--hc-accent);
    background: var(--hc-accent-doux);
    color: var(--hc-accent-texte);
    cursor: pointer;
}

.hc-depot > span {
    display: flex;
    flex-direction: column;
}

.hc-depot:focus-within {
    outline: 2px solid var(--hc-anneau);
    outline-offset: 2px;
}

.hc-depot--en-cours {
    opacity: .6;
    cursor: progress;
}


/* --- Import Excel ---------------------------------------------------------- */
.hc-import {
    display: grid;
    gap: 20px;
    max-width: 980px;
}

.hc-import__corps {
    display: grid;
    gap: 14px;
    justify-items: start;
    padding: 16px 20px 20px;
}

.hc-import__corps > p {
    margin: 0;
    color: var(--hc-texte-2);
    max-width: 75ch;
}

.hc-import__corps > .hc-depot {
    justify-self: stretch;
}

.hc-etape {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--hc-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    vertical-align: 1px;
}

.hc-import__bilan {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-import__bilan li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border: 1px solid var(--hc-bordure);
    border-radius: 10px;
}

.hc-import__nombre {
    min-width: 3ch;
    font-family: var(--hc-police-mono);
    font-size: 20px;
    font-weight: 500;
    text-align: right;
}

.hc-import__ignorees {
    background: var(--hc-alerte-fond);
    border-color: var(--hc-alerte-bordure) !important;
    color: var(--hc-alerte-texte);
}

.hc-import__sous-titre {
    margin: 0;
    padding: 14px 20px 8px;
    border-top: 1px solid var(--hc-bordure);
    font-size: 15px;
    font-weight: 600;
}

.hc-succes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--hc-ok-fond);
    border: 1px solid var(--hc-ok-bordure);
    color: var(--hc-ok-texte);
}

.hc-succes a {
    color: inherit;
    font-weight: 600;
}


/* --- Filtres de la matrice ------------------------------------------------- */
.hc-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 16px;
}

.hc-filtres__groupe {
    width: 220px;
}

.hc-filtres__recherche {
    flex: 1 1 220px;
    max-width: 320px;
}

.hc-segments {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--hc-bordure);
    border-radius: 10px;
    background: var(--hc-surface, transparent);
}

.hc-segment {
    padding: 5px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hc-texte-2);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.hc-segment:hover {
    color: var(--hc-texte);
}

.hc-segment[aria-pressed="true"] {
    background: var(--hc-accent);
    color: #fff;
    font-weight: 600;
}

.hc-segment:focus-visible {
    outline: 2px solid var(--hc-anneau);
    outline-offset: 1px;
}

@media (max-width: 640px) {
    .hc-filtres__groupe,
    .hc-filtres__recherche {
        width: 100%;
        max-width: none;
    }
}


/* --- Référentiel ----------------------------------------------------------- */
.hc-tableau__ligne--inactive td {
    opacity: .6;
}

.hc-tableau__ligne--inactive td.hc-tableau__actions {
    opacity: 1;
}


/* --- Tableau de bord ------------------------------------------------------- */
/* Couleurs des graphiques : vérifiées (daltonisme, contraste) pour chaque thème. */
:root,
:root[data-hc-theme="clair"] {
    --hc-graphe-ok: #3E7D2C;
    --hc-graphe-alerte: #DFA425;
    --hc-graphe-ko: #C7403C;
}

:root[data-hc-theme="sombre"] {
    --hc-graphe-ok: #357A42;
    --hc-graphe-alerte: #B88A24;
    --hc-graphe-ko: #C24545;
}

.hc-pastille--graphe-ok { background: var(--hc-graphe-ok); }
.hc-pastille--graphe-alerte { background: var(--hc-graphe-alerte); }
.hc-pastille--graphe-ko { background: var(--hc-graphe-ko); }

.hc-tableau-bord {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin: 20px 0;
}

.hc-tableau-bord__priorites {
    flex: 3 1 560px;
    min-width: 0;
}

.hc-tableau-bord__groupes {
    flex: 2 1 340px;
    min-width: 0;
}

.hc-legende--compacte {
    padding: 10px 18px;
}

.hc-groupes {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px 18px 18px;
    list-style: none;
}

.hc-groupes__ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
}

.hc-groupes__nom {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-groupes__taux {
    font-weight: 500;
    text-align: right;
}

.hc-groupes__detail {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--hc-texte-2);
}

/* Barre empilée : segments séparés par un filet de 2 px, extrémités arrondies. */
.hc-barre {
    grid-column: 1 / -1;
    display: flex;
    gap: 2px;
    height: 12px;
}

.hc-barre__segment {
    flex-basis: 0;
    min-width: 4px;
}

.hc-barre__segment:first-child { border-radius: 4px 0 0 4px; }
.hc-barre__segment:last-child { border-radius: 0 4px 4px 0; }
.hc-barre__segment:only-child { border-radius: 4px; }

.hc-barre__segment--ok { background: var(--hc-graphe-ok); }
.hc-barre__segment--alerte { background: var(--hc-graphe-alerte); }
.hc-barre__segment--ko { background: var(--hc-graphe-ko); }

/* Histogramme des échéances : une seule série, couleur d'accent. */
.hc-carte__vide--serre {
    padding-bottom: 0;
}

.hc-histogramme {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 20px 20px;
}

.hc-histogramme__colonne {
    display: grid;
    grid-template-rows: 18px 140px auto;
    justify-items: center;
    gap: 4px;
}

.hc-histogramme__valeur {
    font-family: var(--hc-police-mono);
    font-size: 13px;
    color: var(--hc-texte-2);
    align-self: end;
}

.hc-histogramme__zone {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 40px;
    height: 100%;
    border-bottom: 1px solid var(--hc-bordure);
}

.hc-histogramme__barre {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--hc-accent);
}

.hc-histogramme__colonne:hover .hc-histogramme__barre {
    filter: brightness(1.15);
}

.hc-histogramme__mois {
    font-size: 12px;
    color: var(--hc-texte-2);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .hc-histogramme {
        gap: 4px;
        padding: 12px;
    }

    .hc-histogramme__colonne {
        grid-template-rows: 18px 100px auto;
    }

    .hc-histogramme__mois {
        font-size: 10px;
    }
}


/* --- Badges QR ------------------------------------------------------------- */
.hc-badge-apercu {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.hc-badge-apercu__qr svg {
    display: block;
    width: 220px;
    height: 220px;
    padding: 10px;
    border-radius: 10px;
    background: #FFFFFF;
}

.hc-badge-apercu__nom {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Planche : cartes 85 × 54 mm (format carte bancaire / carte BTP), toujours sur fond blanc. */
.hc-planche {
    display: grid;
    grid-template-columns: repeat(auto-fill, 85.6mm);
    gap: 4mm;
}

.hc-badge {
    display: grid;
    grid-template-columns: 1fr 30mm;
    gap: 3mm;
    width: 85.6mm;
    height: 54mm;
    box-sizing: border-box;
    padding: 4mm;
    border: 0.3mm solid #B9B0A0;
    border-radius: 3mm;
    background: #FFFFFF;
    color: #1A1712;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
}

.hc-badge__texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hc-badge__marque {
    display: flex;
    align-items: center;
    gap: 1.5mm;
    font-size: 7pt;
    font-weight: 600;
    color: #1F5C4A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-badge__nom {
    margin: 2.5mm 0 0;
    font-size: 11pt;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.hc-badge__detail,
.hc-badge__groupe {
    margin: 1mm 0 0;
    font-size: 7.5pt;
    line-height: 1.25;
    color: #3D382F;
}

.hc-badge__consigne {
    margin: auto 0 0;
    font-size: 6.5pt;
    color: #5C554A;
}

.hc-badge__qr {
    align-self: center;
}

.hc-badge__qr svg {
    display: block;
    width: 30mm;
    height: 30mm;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 9mm 12mm;
    }

    html, body, .hc-main {
        background: #FFFFFF !important;
    }

    .hc-sidebar,
    .hc-bandeau,
    .hc-non-imprime,
    #blazor-error-ui,
    #components-reconnect-modal {
        display: none !important;
    }

    .hc-main {
        padding: 0 !important;
    }

    .hc-planche {
        grid-template-columns: repeat(2, 85.6mm);
        gap: 1.5mm 4mm;
        justify-content: center;
    }

    .hc-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Vue terrain publique -------------------------------------------------- */
.hc-terrain {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.hc-terrain__entete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
}

.hc-terrain__marque {
    font-weight: 700;
    color: var(--hc-accent-texte, var(--hc-accent));
}

.hc-terrain__mention {
    margin-left: auto;
    font-size: 13px;
    color: var(--hc-texte-2);
}

.hc-terrain__contenu {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 16px;
}

.hc-terrain__carte {
    padding: 20px;
    border-radius: 14px;
    border: 2px solid var(--hc-bordure);
    background: var(--hc-surface);
}

.hc-terrain__carte--ok { border-color: var(--hc-ok-bordure); }
.hc-terrain__carte--alerte { border-color: var(--hc-alerte-bordure); }
.hc-terrain__carte--ko,
.hc-terrain__carte--inconnu { border-color: var(--hc-ko-bordure); }

.hc-terrain__verdict {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.hc-terrain__icone {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
}

.hc-terrain__icone--ok { background: var(--hc-ok-fond); color: var(--hc-ok-texte); }
.hc-terrain__icone--alerte { background: var(--hc-alerte-fond); color: var(--hc-alerte-texte); }
.hc-terrain__icone--ko { background: var(--hc-ko-fond); color: var(--hc-ko-texte); }

.hc-terrain__verdict-texte {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.hc-terrain__date {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--hc-texte-2);
}

.hc-terrain__titre {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
}

.hc-terrain__identite {
    margin: 6px 0 0;
    color: var(--hc-texte-2);
}

.hc-terrain__aide {
    font-size: 14px;
    color: var(--hc-texte-2);
}

.hc-terrain__liste {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-terrain__ligne {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--hc-bordure);
    border-radius: 10px;
    background: var(--hc-surface);
}

.hc-terrain__pastille {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.hc-terrain__pastille--ok { background: var(--hc-ok-fond); color: var(--hc-ok-texte); }
.hc-terrain__pastille--alerte { background: var(--hc-alerte-fond); color: var(--hc-alerte-texte); }
.hc-terrain__pastille--ko { background: var(--hc-ko-fond); color: var(--hc-ko-texte); }

.hc-terrain__habilitation,
.hc-terrain__echeance {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hc-terrain__code {
    font-weight: 600;
}

.hc-terrain__libelle {
    font-size: 14px;
    color: var(--hc-texte-2);
}

.hc-terrain__echeance {
    align-items: flex-end;
    text-align: right;
    font-size: 13px;
}

.hc-terrain__statut {
    font-weight: 600;
}

.hc-terrain__vide {
    color: var(--hc-texte-2);
}

.hc-terrain__pied {
    padding: 24px 0;
    font-size: 12px;
    color: var(--hc-texte-2);
}


/* --- Abonnement ------------------------------------------------------------ */
.hc-abonnement {
    display: grid;
    gap: 14px;
    padding: 16px 20px 20px;
}

.hc-abonnement__infos {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    margin: 0;
}

.hc-abonnement__infos dt {
    font-size: 13px;
    color: var(--hc-texte-2);
}

.hc-abonnement__infos dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 600;
}

.hc-jauge {
    max-width: 420px;
    height: 10px;
    border-radius: 5px;
    background: var(--hc-surface-2);
    border: 1px solid var(--hc-bordure);
    overflow: hidden;
}

.hc-jauge__remplissage {
    display: block;
    height: 100%;
    background: var(--hc-accent);
}

.hc-jauge--pleine .hc-jauge__remplissage {
    background: var(--hc-ko-bordure);
}

.hc-formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0 12px;
}

.hc-formule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.hc-formule--recommandee {
    border: 2px solid var(--hc-accent);
}

.hc-formule__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hc-formule__nom {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.hc-formule__cible {
    margin: 0;
    color: var(--hc-texte-2);
}

.hc-formule__prix {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
}

.hc-formule__montant {
    font-size: 30px;
    font-weight: 700;
}

.hc-formule__periode {
    font-size: 14px;
    color: var(--hc-texte-2);
}

.hc-formule__atouts {
    display: grid;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.hc-formule__atouts li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hc-formule__atouts .hc-icone {
    color: var(--hc-accent-texte);
    flex-shrink: 0;
}

.hc-formule__action {
    margin-top: auto;
}

.hc-bouton-lien {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--hc-accent);
    border-radius: 8px;
    color: var(--hc-accent-texte);
    font-weight: 600;
    text-decoration: none;
}

.hc-bouton-lien:hover {
    background: var(--hc-accent-doux);
}


/* --- Console plateforme ---------------------------------------------------- */
.hc-nav--plateforme {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--hc-bordure-forte);
}

.hc-plateforme__filtres {
    margin-top: 20px;
}

.hc-plateforme__fiche {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 0 0 16px;
}

.hc-plateforme__fiche dt {
    font-size: 13px;
    color: var(--hc-texte-2);
}

.hc-plateforme__fiche dd {
    margin: 2px 0 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hc-plateforme__action {
    margin: 0 0 14px;
    padding: 12px 14px 14px;
    border: 1px solid var(--hc-bordure);
    border-radius: 10px;
}

.hc-plateforme__action legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
}


/* --- Journal d'activité ---------------------------------------------------- */
.hc-journal__date {
    white-space: nowrap;
}

.hc-journal__action {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    border: 1px solid var(--hc-bordure-forte);
    background: var(--hc-surface-2);
    font-size: 13px;
    white-space: nowrap;
}

.hc-journal__action--suppression {
    border-color: var(--hc-ko-bordure);
    background: var(--hc-ko-fond);
    color: var(--hc-ko-texte);
}

.hc-journal__action--renouvellement,
.hc-journal__action--creation {
    border-color: var(--hc-ok-bordure);
    background: var(--hc-ok-fond);
    color: var(--hc-ok-texte);
}

.hc-journal__lien {
    display: block;
    font-weight: 600;
}

.hc-journal__details {
    max-width: 460px;
    font-size: 13px;
    color: var(--hc-texte-2);
    overflow-wrap: anywhere;
}

.hc-journal__auteur {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.hc-journal__suite {
    display: flex;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid var(--hc-bordure);
}


/* --- Premiers pas ---------------------------------------------------------- */
.hc-premiers-pas {
    margin-bottom: 20px;
    padding: 18px 20px 8px;
    border: 2px solid var(--hc-accent);
}

.hc-premiers-pas__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.hc-premiers-pas__titre {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.hc-premiers-pas__jauge {
    margin: 12px 0 6px;
    max-width: none;
}

.hc-premiers-pas__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hc-premiers-pas__etape {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--hc-bordure);
}

.hc-premiers-pas__puce {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--hc-accent);
    color: var(--hc-accent-texte);
    font-size: 13px;
    font-weight: 700;
}

.hc-premiers-pas__etape--faite .hc-premiers-pas__puce {
    border-color: var(--hc-ok-bordure);
    background: var(--hc-ok-fond);
    color: var(--hc-ok-texte);
}

.hc-premiers-pas__nom {
    margin: 0;
    font-weight: 600;
}

.hc-premiers-pas__etape--faite .hc-premiers-pas__nom {
    color: var(--hc-texte-2);
    font-weight: 400;
}

.hc-premiers-pas__description {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--hc-texte-2);
}

@media (max-width: 640px) {
    .hc-premiers-pas__etape {
        grid-template-columns: 30px 1fr;
    }

    .hc-premiers-pas__action {
        grid-column: 2;
        justify-self: start;
    }
}


/* --- Documents juridiques et liens légaux ---------------------------------- */
.hc-terrain--large {
    max-width: 820px;
}

.hc-public__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.hc-juridique {
    line-height: 1.6;
}

.hc-juridique h1 {
    font-size: 26px;
    margin: 8px 0 16px;
}

.hc-juridique h2 {
    font-size: 19px;
    margin: 28px 0 8px;
}

.hc-juridique h3 {
    font-size: 16px;
    margin: 22px 0 6px;
}

.hc-juridique table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 14px;
}

.hc-juridique th,
.hc-juridique td {
    padding: 6px 8px;
    border: 1px solid var(--hc-bordure);
    text-align: left;
    vertical-align: top;
}

.hc-juridique__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--hc-bordure);
    font-size: 14px;
}

.hc-juridique__liens a[aria-current="page"] {
    font-weight: 600;
    text-decoration: none;
}

.ac-liens-legaux {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 24px;
    font-size: 13px;
}

.ac-liens-legaux a {
    color: var(--hc-texte-2);
}

.ac-groupe--case {
    margin-top: 4px;
}

.ac-case {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

.ac-case input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--hc-accent);
}


/* --- Site vitrine ---------------------------------------------------------- */
.vt {
    background: var(--hc-fond);
    color: var(--hc-texte);
}

.vt-largeur {
    width: min(1120px, 100% - 32px);
    margin: 0 auto;
}

.vt-entete {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--hc-fond) 92%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hc-bordure);
}

.vt-entete__ligne {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}

.vt-marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--hc-texte);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.vt-marque__accent {
    color: var(--hc-accent-texte);
}

.vt-nav {
    display: flex;
    gap: 22px;
    margin-left: 12px;
}

.vt-nav a,
.vt-lien {
    color: var(--hc-texte-2);
    font-weight: 500;
    text-decoration: none;
}

.vt-nav a:hover,
.vt-lien:hover {
    color: var(--hc-texte);
}

.vt-entete__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.vt-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid var(--hc-accent);
    border-radius: 10px;
    background: var(--hc-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.vt-bouton:hover {
    filter: brightness(1.08);
    color: #fff;
}

.vt-bouton--petit {
    padding: 8px 14px;
}

.vt-bouton--secondaire {
    background: transparent;
    color: var(--hc-accent-texte);
}

.vt-bouton--secondaire:hover {
    background: var(--hc-accent-doux);
    color: var(--hc-accent-texte);
}

.vt-bouton--clair {
    border-color: #fff;
    background: #fff;
    color: #1F5C4A;
}

.vt-bouton--clair:hover {
    color: #1F5C4A;
}

.vt-hero {
    padding: 72px 0 64px;
}

.vt-hero__grille {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 48px;
}

.vt-surtitre {
    margin: 0 0 12px;
    color: var(--hc-accent-texte);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
}

.vt-hero__titre {
    margin: 0;
    font-size: clamp(32px, 5vw, 50px);
    line-height: 1.1;
    font-weight: 700;
}

.vt-hero__texte {
    margin: 18px 0 26px;
    color: var(--hc-texte-2);
    font-size: 19px;
    line-height: 1.55;
    max-width: 34em;
}

.vt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.vt-hero__note {
    margin: 14px 0 0;
    color: var(--hc-texte-2);
    font-size: 14px;
}

.vt-apercu {
    padding: 18px;
    border: 1px solid var(--hc-bordure);
    border-radius: 16px;
    background: var(--hc-surface);
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / .25);
}

.vt-apercu__barre {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
}

.vt-apercu__kpi {
    color: var(--hc-ok-texte);
}

.vt-apercu__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 13px;
}

.vt-apercu__table th {
    color: var(--hc-texte-2);
    font-weight: 500;
    text-align: left;
}

.vt-apercu__table td {
    padding: 8px;
    border-radius: 6px;
}

.vt-apercu__table td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

.vt-ok { background: var(--hc-ok-fond); color: var(--hc-ok-texte); }
.vt-alerte { background: var(--hc-alerte-fond); color: var(--hc-alerte-texte); }
.vt-ko { background: var(--hc-ko-fond); color: var(--hc-ko-texte); }
.vt-vide { color: var(--hc-texte-2); text-align: center; }

.vt-section {
    padding: 72px 0;
}

.vt-section--sable {
    background: var(--hc-surface-2);
}

.vt-section--sapin {
    background: #1F5C4A;
    color: #F2EEE6;
}

.vt-titre {
    margin: 0 0 12px;
    font-size: clamp(26px, 3.4vw, 34px);
    line-height: 1.2;
    font-weight: 700;
}

.vt-titre--clair {
    color: #fff;
}

.vt-chapeau {
    margin: 0 0 32px;
    color: var(--hc-texte-2);
    font-size: 17px;
    max-width: 46em;
}

.vt-trois,
.vt-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.vt-carte,
.vt-fonction {
    padding: 22px;
    border: 1px solid var(--hc-bordure);
    border-radius: 14px;
    background: var(--hc-surface);
}

.vt-carte h3,
.vt-fonction h3,
.vt-etapes h3,
.vt-tarif h3 {
    margin: 12px 0 6px;
    font-size: 18px;
}

.vt-carte p,
.vt-fonction p,
.vt-etapes p {
    margin: 0;
    color: var(--hc-texte-2);
    line-height: 1.55;
}

.vt-carte__icone,
.vt-fonction__icone {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--hc-accent-doux);
    color: var(--hc-accent-texte);
}

.vt-carte__icone {
    background: var(--hc-ko-fond);
    color: var(--hc-ko-texte);
}

.vt-terrain {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 48px;
}

.vt-terrain p {
    font-size: 17px;
    line-height: 1.6;
}

.vt-liste-coches {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.vt-liste-coches li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vt-section--sapin .vt-liste-coches .hc-icone {
    color: #B5E68A;
}

.vt-badge {
    max-width: 360px;
    justify-self: center;
    padding: 22px;
    border-radius: 18px;
    background: #FFFDF8;
    color: #1A1712;
    box-shadow: 0 24px 48px -20px rgb(0 0 0 / .45);
    border: 3px solid #7DBB45;
}

.vt-badge__verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2F5F0A;
    font-size: 24px;
    font-weight: 700;
}

.vt-badge__nom {
    margin: 12px 0 0;
    font-size: 20px;
    font-weight: 700;
}

.vt-badge__detail {
    margin: 2px 0 12px;
    color: #5C554A;
}

.vt-badge ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.vt-badge li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #DDF3C9;
    color: #2F5F0A;
}

.vt-etapes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.vt-etapes__numero {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hc-accent);
    color: #fff;
    font-weight: 700;
}

.vt-tarifs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.vt-tarif {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 24px;
    border: 1px solid var(--hc-bordure);
    border-radius: 16px;
    background: var(--hc-surface);
}

.vt-tarif--recommande {
    border: 2px solid var(--hc-accent);
}

.vt-tarif__ruban {
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--hc-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.vt-tarif__cible {
    margin: 0;
    color: var(--hc-texte-2);
}

.vt-tarif__prix {
    margin: 10px 0 4px;
    font-size: 34px;
    font-weight: 700;
}

.vt-tarif__prix span {
    color: var(--hc-texte-2);
    font-size: 15px;
    font-weight: 400;
}

.vt-tarif .vt-liste-coches {
    margin-bottom: 20px;
}

.vt-tarif .vt-liste-coches .hc-icone {
    color: var(--hc-accent-texte);
}

.vt-tarif .vt-bouton {
    justify-content: center;
    margin-top: auto;
}

.vt-securite__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: var(--hc-texte-2);
    line-height: 1.55;
}

.vt-securite__liste strong {
    color: var(--hc-texte);
}

.vt-faq details {
    border-bottom: 1px solid var(--hc-bordure);
}

.vt-faq summary {
    padding: 18px 0;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.vt-faq details p {
    margin: 0 0 18px;
    color: var(--hc-texte-2);
    line-height: 1.6;
    max-width: 46em;
}

.vt-appel {
    background: #1F5C4A;
    text-align: center;
}

.vt-appel .vt-titre {
    margin-bottom: 24px;
}

.vt-pied {
    padding: 40px 0 24px;
    border-top: 1px solid var(--hc-bordure);
    color: var(--hc-texte-2);
    font-size: 14px;
}

.vt-pied__ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}

.vt-marque--pied {
    font-size: 16px;
}

.vt-pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.vt-pied__liens a {
    color: var(--hc-texte-2);
}

.vt-pied__copyright {
    margin-top: 24px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .vt-nav {
        display: none;
    }

    .vt-hero__grille,
    .vt-terrain {
        grid-template-columns: 1fr;
    }

    .vt-trois,
    .vt-grille,
    .vt-etapes,
    .vt-tarifs,
    .vt-securite__liste {
        grid-template-columns: 1fr;
    }

    .vt-hero,
    .vt-section {
        padding: 48px 0;
    }
}

@media (max-width: 480px) {
    .vt-lien {
        display: none;
    }

    .vt-apercu__table {
        font-size: 12px;
    }
}

/* Pages de compte : bouton principal utilisé comme lien, messages d'état. */
a.ac-bouton-principal {
    width: 100%;
    text-decoration: none;
}

a.ac-bouton-principal:hover {
    color: #FFFFFF;
}

.ac-contenu .hc-succes,
.ac-contenu .hc-erreur {
    margin-bottom: 20px;
}