/* ===== NAVIGATION : PIED DE SIDEBAR ===== */
.sidebar__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.sidebar__account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px;
    border-radius: var(--radius);
    white-space: nowrap;
}

.sidebar__account[aria-current="page"] .sidebar__user strong {
    color: var(--color-primary);
}

.sidebar__user {
    display: flex;
    flex-direction: column;
}

.sidebar__logout {
    margin: 0;
}

button.nav-link {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    font-weight: 500;
    text-align: left;
}

.nav-link--list span {
    opacity: 1;
}

.nav-link--list {
    width: 100%;
    height: auto;
    padding: 4px 0;
    color: var(--color-text);
}

.drawer__logout,
.drawer__logout .btn {
    width: 100%;
}

/* ===== TABLEAU DE BORD ===== */
.chart-bars {
    display: block;
    width: 100%;
    height: 180px;
}

.chart-bars__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.steps {
    counter-reset: step;
}

.steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider);
    counter-increment: step;
}

.steps li:last-child {
    border-bottom: none;
}

.steps li::before {
    content: counter(step);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.10);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
}

.steps a {
    color: var(--color-primary);
    font-weight: 500;
}

.steps a:hover {
    text-decoration: underline;
}

/* ===== LISTES : liens, pagination ===== */
a.list-item__title:hover {
    color: var(--color-primary);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

/* ===== FORMULAIRES DE PAGE ===== */
.inline-form {
    display: flex;
    gap: 12px;
}

.inline-form .form-input {
    flex: 1;
    min-width: 0;
}

.form-card {
    max-width: 560px;
}

.form-error {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-negative);
}

.form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--color-divider);
}

/* ===== JETON AFFICHE UNE SEULE FOIS ===== */
.code-block {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--color-text);
    word-break: break-all;
    user-select: all;
}

.alert__body {
    flex: 1;
    min-width: 0;
}

.alert__body .code-block {
    margin-top: 10px;
}

/* ===== FICHES CHIFFREES (détail job / page légale) ===== */
.facts-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.fact {
    min-width: 0;
}

.fact__value {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.back-link:hover {
    color: var(--color-primary);
}

/* ===== PLUGINS ===== */
.plugin-item__actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

/* ===== PREVIEW HTML (page légale) ===== */
.preview {
    padding: 20px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
    color: var(--color-text-body);
}

.preview h1, .preview h2, .preview h3 {
    margin: 20px 0 8px;
    font-family: var(--font-display);
    color: var(--color-text);
}

.preview p, .preview ul, .preview ol {
    margin: 0 0 12px;
}

.preview ul, .preview ol {
    padding-left: 22px;
    list-style: revert;
}

pre.code-source {
    max-width: 100%;
    max-height: 360px;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border-radius: var(--radius);
    background: var(--color-divider);
    font-size: 12px;
}

/* ===== CLES IA ===== */
.key-field {
    position: relative;
}

.provider-name {
    text-transform: capitalize;
}

.form-input[readonly] {
    background: var(--color-bg);
    color: var(--color-text-muted);
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer__footer .btn[hidden],
.btn[hidden] {
    display: none;
}

.drawer__footer-actions {
    display: flex;
    gap: 12px;
}

/* ===== ATTRIBUT hidden TOUJOURS RESPECTE ===== */
[hidden] {
    display: none !important;
}

/* ===== CLES IA : cartes fournisseurs ===== */
.provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.provider-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.provider-head .badge {
    margin-left: auto;
}

.default-star {
    display: inline-flex;
    padding: 4px;
    border: none;
    background: none;
    border-radius: var(--radius);
    color: #D1D5DB;
    cursor: pointer;
    transition: color var(--transition);
}

.default-star:hover {
    color: var(--color-accent);
}

.default-star.is-default {
    color: var(--color-accent);
}

.default-star.is-default .icon {
    fill: currentColor;
}

.key-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.key-field .form-input {
    padding-right: 40px;
}

.key-field__eye {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.key-field__eye:hover {
    color: var(--color-primary);
}

.provider-grid .alert {
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .provider-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .facts-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* ===== ESPACEMENT DE SECTIONS ===== */
.section-gap {
    margin-top: 24px;
}

/* ===== LISTE DE DETAILS (dl) ===== */
.detail-list {
    margin: 0;
}

.detail-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-divider);
}

.detail-list > div:last-child {
    border-bottom: none;
}

.detail-list dt {
    color: var(--color-text-muted);
}

.detail-list dd {
    margin: 0;
    min-width: 0;
    text-align: right;
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

/* ===== ADMIN : barre de recherche ===== */
.toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.mono {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 13px;
}

.ip-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ip-flag .fi {
    border-radius: 2px;
}

/* ===== CATALOGUE : lots dans le drawer ===== */
.batch + .batch {
    margin-top: 20px;
}

.batch__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.drawer__section {
    margin-bottom: 28px;
}

.drawer__section:last-child {
    margin-bottom: 0;
}

.drawer__section > .label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolbar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== DRAWER AVEC FORMULAIRE ===== */
.drawer__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

/* ===== CATALOGUE : DOSSIERS ===== */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.crumbs a {
    color: var(--color-text-muted);
    font-weight: 500;
}

.crumbs a:hover {
    color: var(--color-primary);
}

.crumbs [aria-current] {
    color: var(--color-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crumbs .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.back-link--mobile {
    display: none;
}

/* Grille */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dossier : onglet + fond coloré + feuille de devant */
.folder {
    --f-back: #CFE3E8;
    --f-ink: var(--color-primary);
    position: relative;
    min-width: 0;
}

.folder--amber {
    --f-back: #F6DDAE;
    --f-ink: #92400E;
}

.folder--slate {
    --f-back: #DDE1E6;
    --f-ink: #4B5563;
}

.folder--rose {
    --f-back: #F7CFCF;
    --f-ink: #991B1B;
}

.folder__tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 104px;
    height: 20px;
    background: var(--f-back);
    border-radius: var(--radius) 0 0 0;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
    transition: filter var(--transition);
}

.folder__back {
    position: absolute;
    top: 14px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--f-back);
    border-radius: 0 var(--radius) var(--radius) var(--radius);
    transition: filter var(--transition);
}

.folder:hover .folder__tab,
.folder:hover .folder__back {
    filter: brightness(0.94);
}

.folder__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 18px 16px;
    background: var(--color-surface);
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: var(--radius);
    min-width: 0;
}

.folder__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--f-ink);
}

.folder__top .icon {
    width: 28px;
    height: 28px;
}

.folder__go {
    width: 18px;
    height: 18px;
    color: var(--color-text-faint);
    transition: transform var(--transition), color var(--transition);
}

.folder:hover .folder__go {
    color: var(--f-ink);
    transform: translateX(3px);
}

.folder__title {
    display: block;
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

/* Tout le dossier est cliquable */
.folder__title::after {
    content: "";
    position: absolute;
    inset: -24px -0px -0px;
}

.folder__contents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--color-text-muted);
}

.folder__contents li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.folder__contents .icon {
    width: 14px;
    height: 14px;
}

.folder__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--color-divider);
}

.folder__count {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.folder__count strong {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.folder__date {
    font-size: 12px;
    color: var(--color-text-faint);
    white-space: nowrap;
}

.text-break {
    overflow-wrap: anywhere;
}

.folder__ref {
    align-self: flex-start;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--f-ink);
    background: var(--color-bg);
    border-radius: var(--radius);
}