/**
 * 🏛 NUMÉRIE 2.5 — BASE STYLESHEET
 * Import des Tokens, Reset Moderne, Composants et Utilitaires Vanilla CSS
 */

@import url("./tokens.d218b27eef1e.css");
@import url("./components/buttons.0a48064959b7.css");
@import url("./components/cards.4e989a8a8c73.css");
@import url("./components/badges.24642e948009.css");
@import url("./components/tables.a48a00a1c341.css");
@import url("./components/forms.8c2c1f1931b6.css");
@import url("./components/modals.8e8312a96f02.css");
@import url("./components/drawer.4bfc215d5bdf.css");
@import url("./components/dropdown.396d6973ef14.css");
@import url("./components/command.d8bcf4a080c1.css");
@import url("./components/accordion.0f577d468953.css");
@import url("./components/tooltip.ab14ca50e470.css");
@import url("./components/toast.0e7a59fceadd.css");
@import url("./components/tabs.67bd2b16510d.css");
@import url("./components/pagination.d24bfac825f0.css");
@import url("./layouts/cockpit.e29d66bee127.css");

/* ── Reset Moderne & Box-sizing ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    color: var(--color-text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ── Alpine.js & HTMX États Globaux ── */
[x-cloak] {
    display: none !important;
}

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* ── Typographie & Titres ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    line-height: 1.25;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

a {
    color: var(--color-cobalt);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-cobalt-dark);
}

/* ── Utilitaires Essentiels Numérie (Vanilla CSS Standard) ── */
.is-hidden, .u-hidden { display: none !important; }
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-inline { display: inline; }
.u-cursor-pointer { cursor: pointer; }

/* Flexbox */
.u-flex { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-row { display: flex; flex-direction: row; }
.u-flex-wrap { flex-wrap: wrap; }
.u-flex-1 { flex: 1; min-width: 0; }
.u-flex-2 { flex: 2; min-width: 0; }
.u-flex-shrink-0 { flex-shrink: 0; }
.u-items-center { align-items: center; }
.u-items-start { align-items: flex-start; }
.u-items-end { align-items: flex-end; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-end { justify-content: flex-end; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Grid & Layouts */
.u-grid { display: grid; }
.u-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.u-grid-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.layout-2-1,
.layout-sidebar-right {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6, 24px);
    align-items: start;
}

.u-col-span-1 { grid-column: span 1 / span 1; }
.u-col-span-2 { grid-column: span 2 / span 2; }
.u-col-span-3 { grid-column: span 3 / span 3; }
.u-col-span-4 { grid-column: span 4 / span 4; }
.u-col-span-full { grid-column: 1 / -1; }

@media (max-width: 1024px) {
    .layout-2-1,
    .layout-sidebar-right {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .u-grid-2,
    .u-grid-3,
    .u-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Spacings - Gaps */
.u-gap-0-5 { gap: var(--space-0-5); }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }
.u-gap-8 { gap: var(--space-8); }

/* Spacings - Margins */
.u-m-0 { margin: 0 !important; }
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-8 { margin-bottom: var(--space-8); }

.u-mr-1 { margin-right: var(--space-1); }
.u-mr-2 { margin-right: var(--space-2); }
.u-mr-3 { margin-right: var(--space-3); }
.u-mr-4 { margin-right: var(--space-4); }

.u-ml-auto { margin-left: auto; }
.u-mr-auto { margin-right: auto; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

/* Spacings - Paddings */
.u-p-0 { padding: 0 !important; }
.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }

.u-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.u-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.u-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.u-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.u-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.u-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.u-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.u-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.u-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.u-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.u-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* Typography & Colors */
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-left { text-align: left; }

.u-text-3xs { font-size: 0.65rem; }
.u-text-2xs { font-size: var(--text-2xs); }
.u-text-xs { font-size: var(--text-xs); }
.u-text-sm { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-lg { font-size: var(--text-lg); }
.u-text-xl { font-size: var(--text-xl); }
.u-text-2xl { font-size: var(--text-2xl); }
.u-text-3xl { font-size: var(--text-3xl); }
.u-text-4xl { font-size: var(--text-4xl); }

.u-font-normal { font-weight: 400; }
.u-font-medium { font-weight: 500; }
.u-font-semibold { font-weight: 600; }
.u-font-bold { font-weight: 700; }
.u-font-extrabold { font-weight: 800; }
.u-italic { font-style: italic; }

.u-text-primary { color: var(--color-text-primary); }
.u-text-secondary { color: var(--color-text-secondary); }
.u-text-muted { color: var(--color-text-muted); }
.u-text-subtle { color: var(--color-text-subtle); }
.u-text-white { color: var(--color-text-inverted); }
.u-text-success { color: var(--color-success); }
.u-text-danger { color: var(--color-danger); }
.u-text-warning { color: var(--color-warning); }
.u-text-info { color: var(--color-info); }
.u-text-cobalt { color: var(--color-cobalt); }

.u-font-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.u-uppercase { text-transform: uppercase; }
.u-tracking-wide { letter-spacing: 0.05em; }

.u-w-full { width: 100%; }
.u-h-full { height: 100%; }
.u-max-w-md { max-width: 28rem; }
.u-max-w-lg { max-width: 32rem; }
.u-max-w-xl { max-width: 36rem; }
.u-max-w-2xl { max-width: 42rem; }

.u-rounded-sm { border-radius: var(--radius-sm); }
.u-rounded-md { border-radius: var(--radius-md); }
.u-rounded-lg { border-radius: var(--radius-lg); }
.u-rounded-xl { border-radius: var(--radius-xl); }
.u-rounded-full { border-radius: var(--radius-full); }

.u-border-subtle { border: 1px solid var(--border-subtle); }
.u-border-bottom { border-bottom: 1px solid var(--border-subtle); }
.u-border-bottom-2 { border-bottom: 2px solid var(--border-subtle); }
.u-border-warning-l { border-left: 3px solid var(--color-warning) !important; }
.u-border-success-l { border-left: 3px solid var(--color-success) !important; }
.u-border-danger-l { border-left: 3px solid var(--color-danger) !important; }
.u-border-cobalt-l { border-left: 3px solid var(--color-cobalt) !important; }
.is-inactive-row { opacity: 0.6; background-color: var(--bg-surface-subtle) !important; }

/* Surfaces & Backgrounds */
.u-bg-surface { background-color: var(--bg-surface); }
.u-bg-surface-subtle { background-color: var(--bg-surface-subtle); }
.u-bg-info-subtle { background-color: var(--color-info-bg); border: 1px solid var(--color-info-border); }
.u-bg-danger-subtle { background-color: var(--color-danger-bg); border: 1px solid var(--color-danger-border); }
.u-bg-success-subtle { background-color: var(--color-success-bg); border: 1px solid var(--color-success-border); }
.u-bg-warning-subtle { background-color: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }

.u-opacity-30 { opacity: 0.3; }
.u-opacity-50 { opacity: 0.5; }
.u-opacity-70 { opacity: 0.7; }

.u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Scrollbars Personnalisées ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ── Hover Tooltip (Photo Preview & Text) ── */
.hover-tooltip-trigger {
    position: relative;
}
.hover-tooltip-trigger .hover-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: var(--space-2);
    z-index: 50;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    box-shadow: var(--shadow-md);
}
.hover-tooltip-trigger:hover .hover-tooltip {
    display: block;
}
.hover-tooltip-trigger .hover-tooltip--dark {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--space-2);
    z-index: 50;
    background: var(--color-text-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    text-align: center;
    width: 12rem;
    font-size: var(--text-xs);
}
.hover-tooltip-trigger:hover .hover-tooltip--dark {
    display: block;
}
.u-object-cover { object-fit: cover; }