/* Mise en page. Ne consomme que les tokens de tokens.css. */

html, body {
    margin: 0;
    background: var(--db-color-bg);
    color: var(--db-color-text);
    font-family: var(--db-font-body);
    font-size: var(--db-font-size-md);
    line-height: var(--db-line-height);
}

a { color: var(--db-color-accent); }

/* ---------- Structure ---------- */

.db-layout { min-height: 100vh; }

.db-header {
    background: var(--db-gradient-header);
    box-shadow: var(--db-shadow-header);
    color: var(--db-color-text-inverse);
}

.db-header__inner {
    display: flex;
    align-items: center;
    gap: var(--db-space-3);
    height: var(--db-header-height);
    padding: 0 var(--db-space-4);
}

.db-header__toggle { color: var(--db-color-text-inverse); }
.db-header__spacer { flex: 1; }

.db-header__user {
    display: inline-flex;
    align-items: center;
    gap: var(--db-space-2);
    font-size: var(--db-font-size-sm);
    color: var(--db-color-text-inverse);
    opacity: 0.95;
}

.db-header__admin {
    font-size: var(--db-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px var(--db-space-2);
    border: var(--db-border-width) solid rgba(255, 255, 255, 0.6);
    border-radius: var(--db-radius-sm);
}

.db-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--db-space-2);
    font-family: var(--db-font-display);
    font-size: var(--db-font-size-lg);
    font-weight: var(--db-font-weight-bold);
    color: var(--db-color-text-inverse);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.db-brand--large {
    font-size: var(--db-font-size-xxl);
    color: var(--db-color-accent);
}

/* Menu profil (en haut à droite) */

.db-profile { position: relative; }

.db-profile__button {
    display: inline-flex;
    align-items: center;
    gap: var(--db-space-2);
    background: transparent;
    border: none;
    color: var(--db-color-text-inverse);
    font: inherit;
    font-size: var(--db-font-size-sm);
    padding: var(--db-space-2);
    border-radius: var(--db-radius-md);
    cursor: pointer;
    transition: background var(--db-transition-fast);
}

.db-profile__button:hover { background: rgba(255, 255, 255, 0.12); }

.db-profile__backdrop { position: fixed; inset: 0; z-index: 1000; }

.db-profile__menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--db-space-1));
    min-width: 200px;
    background: var(--db-color-surface);
    border: var(--db-border-width) solid var(--db-color-border);
    border-radius: var(--db-radius-md);
    box-shadow: var(--db-shadow-card);
    padding: var(--db-space-1);
    z-index: 1001;
}

.db-profile__item {
    display: flex;
    align-items: center;
    gap: var(--db-space-2);
    width: 100%;
    background: transparent;
    border: none;
    color: var(--db-color-text);
    font: inherit;
    padding: var(--db-space-2) var(--db-space-3);
    border-radius: var(--db-radius-sm);
    cursor: pointer;
    text-align: left;
}

.db-profile__item:hover { background: var(--db-color-surface-hover); color: var(--db-color-accent); }

.db-sidebar,
.db-sidebar .rz-panel-menu,
.db-sidebar .rz-navigation-item-link {
    background: var(--db-color-surface);
}

.db-sidebar { border-right: var(--db-border-width) solid var(--db-color-border); }

.db-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--db-color-surface);
}

.db-nav__menu { flex: 1; padding-top: var(--db-space-2); }

.db-body { background: var(--db-color-bg); }

.db-page {
    max-width: var(--db-page-max-width);
    margin: 0 auto;
    padding: var(--db-space-5) var(--db-space-4) var(--db-space-7);
}

/* ---------- Titres et en-têtes de page ---------- */

.db-title {
    font-family: var(--db-font-display);
    font-size: var(--db-font-size-xl);
    font-weight: var(--db-font-weight-bold);
    color: var(--db-color-accent-strong);
    margin: 0;
}

.db-title__numero { color: var(--db-color-text-muted); font-weight: var(--db-font-weight-regular); }

.db-section-title {
    font-size: var(--db-font-size-md);
    font-weight: var(--db-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--db-color-accent);
    margin: 0 0 var(--db-space-4);
    padding-bottom: var(--db-space-2);
    border-bottom: var(--db-border-width-strong) solid var(--db-color-accent-soft);
}

.db-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--db-space-4);
    margin-bottom: var(--db-space-5);
}

.db-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--db-space-3);
    margin-top: var(--db-space-2);
}

.db-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--db-space-2);
    align-items: center;
}

.db-filtre { min-width: 230px; }

.db-muted { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }
.db-pre { white-space: pre-wrap; margin: 0; }

/* ---------- Cartes ---------- */

.db-card {
    background: var(--db-color-surface);
    border: var(--db-border-width) solid var(--db-color-border);
    border-radius: var(--db-radius-lg);
    box-shadow: var(--db-shadow-card);
    padding: var(--db-space-5);
}

.db-card--flush { padding: 0; overflow: hidden; }
.db-card--accent { border-left: 4px solid var(--db-color-accent); margin-bottom: var(--db-space-5); }

.db-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--db-space-4);
}

.db-detail > .db-card:nth-last-child(-n+2) { grid-column: 1 / -1; }

.db-empty {
    text-align: center;
    color: var(--db-color-text-muted);
    padding: var(--db-space-7);
}

.db-empty__icon { font-size: 48px; color: var(--db-color-accent-soft); }

/* ---------- Formulaires ---------- */

.db-form { display: flex; flex-direction: column; gap: var(--db-space-4); }
.db-form--wide { max-width: 100%; }

.db-grid { display: grid; gap: var(--db-space-4); margin-bottom: var(--db-space-4); }
.db-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-grid > .rz-form-field { width: 100%; }
.db-field--full { width: 100%; display: flex; box-sizing: border-box; }
.rz-form-field.db-field--full { margin-bottom: var(--db-space-4); }
.db-field__label--spaced { margin-top: var(--db-space-2); }

.db-field { display: flex; flex-direction: column; gap: var(--db-space-1); }
.db-field__label {
    display: block;
    font-size: var(--db-font-size-sm);
    font-weight: var(--db-font-weight-semibold);
    color: var(--db-color-text-muted);
    margin-bottom: var(--db-space-2);
}

.db-input {
    height: var(--db-input-height);
    padding: 0 var(--db-space-3);
    border: var(--db-border-width) solid var(--db-color-border-strong);
    border-radius: var(--db-radius-md);
    background: var(--db-color-surface);
    color: var(--db-color-text);
    font: inherit;
    transition: border-color var(--db-transition-fast), box-shadow var(--db-transition-fast);
}

.db-input:focus { outline: none; border-color: var(--db-color-accent); box-shadow: var(--db-shadow-focus); }

.db-button--block { width: 100%; margin-top: var(--db-space-2); }

.db-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--db-space-2);
    padding-top: var(--db-space-2);
}

/* Choix visuels : vignettes cliquables (orientation du roule, miroirs) */

.db-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--db-orientation-width), 1fr));
    gap: var(--db-space-3);
    margin-bottom: var(--db-space-5);
}

.db-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--db-space-2);
    padding: var(--db-space-3);
    background: var(--db-color-surface);
    border: var(--db-border-width-strong) solid var(--db-color-border);
    border-radius: var(--db-radius-md);
    cursor: pointer;
    font: inherit;
    color: var(--db-color-text);
    transition: border-color var(--db-transition-fast), background var(--db-transition-fast);
}

.db-choice:hover { border-color: var(--db-color-border-strong); background: var(--db-color-surface-alt); }
.db-choice--active { border-color: var(--db-color-accent); background: var(--db-color-accent-soft); }
.db-choice__image { width: 100%; max-width: 220px; height: auto; }
.db-choice__image--round { max-width: 180px; }
.db-choice__label { font-weight: var(--db-font-weight-semibold); }

.db-disposition { display: flex; gap: var(--db-space-5); align-items: flex-start; flex-wrap: wrap; }
.db-disposition__image { width: 220px; max-width: 100%; border: var(--db-border-width) solid var(--db-color-border); border-radius: var(--db-radius-md); }
.db-disposition__image--round { width: 180px; border: none; }

/* Fichiers */

.db-files { list-style: none; margin: 0 0 var(--db-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--db-space-1); }

.db-file {
    display: flex;
    align-items: center;
    gap: var(--db-space-3);
    padding: var(--db-space-2) var(--db-space-3);
    border: var(--db-border-width) solid var(--db-color-border);
    border-radius: var(--db-radius-md);
    background: var(--db-color-surface-alt);
}

.db-file--new { border-style: dashed; border-color: var(--db-color-accent); background: var(--db-color-accent-soft); }
.db-file__icon { color: var(--db-color-accent); }
.db-file__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--db-color-text); }
.db-file__size { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }
.db-file__download { display: inline-flex; color: var(--db-color-accent); }

/* Zone de dépôt : l'input natif recouvre toute la zone (invisible) pour que le clic et le glisser-déposer fonctionnent sans JS. */
.db-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--db-space-1);
    padding: var(--db-space-5) var(--db-space-4);
    border: var(--db-border-width-strong) dashed var(--db-color-border-strong);
    border-radius: var(--db-radius-md);
    color: var(--db-color-accent);
    cursor: pointer;
    transition: border-color var(--db-transition-fast), background var(--db-transition-fast);
}

.db-upload:hover, .db-upload:focus-within { border-color: var(--db-color-accent); background: var(--db-color-accent-soft); }
.db-upload--busy { cursor: progress; opacity: 0.8; }
.db-upload--dragging { border-color: var(--db-color-accent); border-style: solid; background: var(--db-color-accent-soft); box-shadow: var(--db-shadow-focus); }
.db-upload__icon { font-size: 32px; }
.db-upload__title { font-weight: var(--db-font-weight-semibold); }
.db-upload__hint { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }

.db-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ---------- Détail ---------- */

.db-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--db-space-2) var(--db-space-4);
    margin: 0;
}

.db-dl dt { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }
.db-dl dd { margin: 0; font-weight: var(--db-font-weight-semibold); }

.db-statut {
    display: inline-block;
    padding: 2px var(--db-space-3);
    border-radius: 999px;
    font-size: var(--db-font-size-xs);
    font-weight: var(--db-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.db-statut--nouvelle { background: var(--db-color-info-soft); color: var(--db-color-info); }
.db-statut--encours { background: var(--db-color-warning-soft); color: var(--db-color-warning); }
.db-statut--traitee { background: var(--db-color-success-soft); color: var(--db-color-success); }
.db-statut--retouche { background: var(--db-color-accent-soft); color: var(--db-color-accent); }

.db-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--db-space-3); }

.db-timeline__item {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: var(--db-space-1) var(--db-space-4);
    padding-left: var(--db-space-4);
    border-left: var(--db-border-width-strong) solid var(--db-color-accent-soft);
}

.db-timeline__date { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }
.db-timeline__label { font-weight: var(--db-font-weight-semibold); }
.db-timeline__author { color: var(--db-color-text-muted); font-size: var(--db-font-size-sm); }
.db-timeline__comment { grid-column: 1 / -1; color: var(--db-color-text); }

.db-grid-table .rz-datatable-data tr { cursor: pointer; }

/* ---------- Alertes ---------- */

.db-alert {
    padding: var(--db-space-3) var(--db-space-4);
    border-radius: var(--db-radius-md);
    border: var(--db-border-width) solid transparent;
    margin-bottom: var(--db-space-4);
}

.db-alert__list { margin: 0; padding-left: var(--db-space-4); }
.db-alert--danger { background: var(--db-color-danger-soft); color: var(--db-color-danger); border-color: var(--db-color-danger); }
.db-alert--warning { background: var(--db-color-warning-soft); color: var(--db-color-warning); border-color: var(--db-color-warning); }
.db-alert--info { background: var(--db-color-info-soft); color: var(--db-color-info); border-color: var(--db-color-info); }

/* ---------- Login ---------- */

.db-login-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--db-space-4);
    background: var(--db-color-bg);
    background-image: radial-gradient(ellipse at top, var(--db-color-accent-soft) 0%, transparent 60%);
}

.db-login { width: 100%; max-width: var(--db-login-width); display: flex; flex-direction: column; gap: var(--db-space-5); }
.db-login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--db-space-1); }
.db-login__tagline { color: var(--db-color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--db-font-size-xs); }
.db-login__card { border-top: 4px solid var(--db-color-accent); }

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .db-grid--2, .db-grid--3, .db-detail { grid-template-columns: 1fr; }
    .db-page { padding: var(--db-space-4) var(--db-space-3) var(--db-space-6); }
    .db-profile__name { display: none; }
    .db-timeline__item { grid-template-columns: 1fr; }
    .db-dl { grid-template-columns: 1fr; }
}