/* === css/tokens.css === */
/* ============================================================
   Oxil Share — Design tokens (Story 1.5)

   Source canonique : _bmad-output/planning-artifacts/ux-design-final-mockup.html
   (section TOKENS lignes 13-79). Toute valeur ici doit refléter le mockup.

   Convention `--color-*` (canonique). Les anciens alias `--c-*` sont conservés
   en bas du fichier pour rétro-compatibilité avec les composants migrés
   progressivement.
   ============================================================ */

:root {
    /* ─── OXIL brand ────────────────────────────────────────────── */
    --color-navy:           #2A3F53;
    --color-navy-800:       #1D2C3B;
    --color-navy-600:       #3E556B;
    --color-violet:         #8c78fe;
    --color-violet-dark:    #5a4ed6;
    --color-violet-hover:   #7c68ee;
    --color-cyan:           #2ebfbf;
    --gradient-signature:   linear-gradient(135deg, #8c78fe 0%, #2ebfbf 100%);

    /* ─── Couleurs surface / texte / bordure ────────────────────── */
    --color-white:          #FFFFFF;
    --color-bg-subtle:      #F7F9FB;
    --color-border:         #E5EBF0;
    --color-border-strong:  #CBD4DD;
    --color-text:           #1D2C3B;
    --color-text-muted:     #5A7085;
    --color-text-subtle:    #8B9BAA;

    /* ─── Couleurs sémantiques ──────────────────────────────────── */
    --color-success:        #10B981;
    --color-success-text:   #047857;
    --color-success-subtle: #D1FAE5;
    --color-warning:        #F59E0B;
    --color-warning-text:   #B45309;
    --color-warning-subtle: #FEF3C7;
    --color-danger:         #EF4444;
    --color-danger-text:    #B91C1C;
    --color-danger-subtle:  #FEE2E2;
    --color-info:           #3B82F6;
    --color-info-text:      #1E40AF;
    --color-info-subtle:    #DBEAFE;

    /* ─── Tokens thémables (fallback OXIL) ──────────────────────── */
    --color-accent:           var(--color-violet);
    --color-accent-hover:     var(--color-violet-hover);
    --color-accent-dark:      var(--color-violet-dark);
    --color-accent-subtle:    rgba(140, 120, 254, 0.08);
    --color-accent-contrast:  #FFFFFF;
    --color-accent-focus:     rgba(140, 120, 254, 0.35);
    --color-bg-client-1:      #8c78fe;
    --color-bg-client-2:      #2ebfbf;

    /* ─── Typographie ───────────────────────────────────────────── */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* ─── Spacing scale ─────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ─── Border radius ─────────────────────────────────────────── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --radius-xl:    20px;
    --radius-full:  9999px;

    /* ─── Ombres ────────────────────────────────────────────────── */
    --shadow-sm:         0 1px 2px rgba(29, 44, 59, 0.04);
    --shadow-card:       0 1px 3px rgba(29, 44, 59, 0.06), 0 4px 12px rgba(29, 44, 59, 0.06);
    --shadow-card-hover: 0 2px 6px rgba(29, 44, 59, 0.08), 0 8px 24px rgba(29, 44, 59, 0.08);
    --shadow-modal:      0 8px 40px rgba(29, 44, 59, 0.15), 0 4px 12px rgba(29, 44, 59, 0.08);

    /* ─── Transitions ───────────────────────────────────────────── */
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Breakpoints (cohérent UX-DR46) ────────────────────────── */
    --bp-xs: 360px;
    --bp-sm: 640px;
    --bp-md: 1024px;
    --bp-lg: 1280px;
    --bp-xl: 1536px;

    /* ─── Z-index layers ────────────────────────────────────────── */
    --z-base:    1;
    --z-sticky:  10;
    --z-overlay: 100;
    --z-modal:   1000;
    --z-toast:   9999;

    /* ============================================================
       Alias rétro-compatibilité (`--c-*`)
       Les composants Story 1.6 utilisent encore ces noms.
       À migrer progressivement vers `--color-*`.
       ============================================================ */
    --c-oxil-1:        var(--color-violet);
    --c-oxil-2:        var(--color-cyan);
    --c-oxil-grad:     var(--gradient-signature);

    --c-navy-900:      #0f172a;
    --c-navy-800:      var(--color-navy-800);
    --c-navy-700:      #334155;
    --c-navy-600:      var(--color-navy-600);
    --c-navy-500:      #64748b;
    --c-navy-400:      #94a3b8;
    --c-navy-300:      var(--color-border-strong);
    --c-navy-200:      var(--color-border);
    --c-navy-100:      #f1f5f9;
    --c-navy-50:       var(--color-bg-subtle);

    --c-bg:            var(--color-bg-subtle);
    --c-surface:       var(--color-white);
    --c-text:          var(--color-text);
    --c-text-muted:    var(--color-text-muted);
    --c-text-subtle:   var(--color-text-subtle);
    --c-border:        var(--color-border);
    --c-border-strong: var(--color-border-strong);

    --c-success:       var(--color-success-text);
    --c-success-bg:    var(--color-success-subtle);
    --c-success-text:  var(--color-success-text);
    --c-error:         var(--color-danger-text);
    --c-error-bg:      var(--color-danger-subtle);
    --c-error-text:    var(--color-danger-text);
    --c-warning:       var(--color-warning);
    --c-warning-bg:    var(--color-warning-subtle);
    --c-warning-text:  var(--color-warning-text);
    --c-info:          var(--color-info);
    --c-info-bg:       var(--color-info-subtle);
    --c-info-text:     var(--color-info-text);

    --c-accent:        var(--color-accent);
    --c-accent-dark:   var(--color-accent-dark);
    --c-accent-subtle: var(--color-accent-subtle);
    --c-accent-focus:  var(--color-accent-focus);

    --c-tenant-primary:   var(--color-bg-client-1);
    --c-tenant-secondary: var(--color-bg-client-2);
    --c-tenant-accent:    var(--color-accent);
    --c-tenant-text:      var(--color-accent-contrast);

    /* Alias typographie (`--fs-*` → `--text-*`) */
    --fs-xs:   var(--text-xs);
    --fs-sm:   var(--text-sm);
    --fs-base: var(--text-base);
    --fs-md:   var(--text-base);
    --fs-lg:   var(--text-lg);
    --fs-xl:   var(--text-xl);
    --fs-2xl:  var(--text-2xl);
    --fs-3xl:  var(--text-3xl);
    --fs-4xl:  var(--text-4xl);
    --fs-5xl:  var(--text-5xl);

    --font-sans:  var(--font-display);
    --font-serif: 'Georgia', 'Times New Roman', serif;

    --lh-tight:   1.2;
    --lh-snug:    1.4;
    --lh-base:    1.5;
    --lh-relaxed: 1.7;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --duration-slower: 500ms;
    --ease-bounce:     var(--ease-spring);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.12);

    --radius-2xl: 24px;

    --space-0: 0;
}

/* ============================================================
   Thèmes clients — overrides à appliquer via class sur <body> ou
   conteneur racine (ex: `<body class="theme-hermes">`).
   Source : mockup section 1, lignes 82-139.
   ============================================================ */

.theme-oxil {
    --color-accent:          #8c78fe;
    --color-accent-hover:    #7c68ee;
    --color-accent-dark:     #5a4ed6;
    --color-accent-subtle:   rgba(140, 120, 254, 0.08);
    --color-accent-contrast: #FFFFFF;
    --color-accent-focus:    rgba(140, 120, 254, 0.35);
    --color-bg-client-1:     #8c78fe;
    --color-bg-client-2:     #2ebfbf;
}

.theme-hermes {
    --color-accent:          #F37022;
    --color-accent-hover:    #DC5F15;
    --color-accent-dark:     #8C3A0F;
    --color-accent-subtle:   rgba(243, 112, 34, 0.08);
    --color-accent-contrast: #FFFFFF;
    --color-accent-focus:    rgba(243, 112, 34, 0.35);
    --color-bg-client-1:     #f36e20;
    --color-bg-client-2:     #a44719;
}

.theme-enedis {
    --color-accent:          #005eb8;
    --color-accent-hover:    #004a92;
    --color-accent-dark:     #002c5c;
    --color-accent-subtle:   rgba(0, 94, 184, 0.08);
    --color-accent-contrast: #FFFFFF;
    --color-accent-focus:    rgba(0, 94, 184, 0.35);
    --color-bg-client-1:     #005eb8;
    --color-bg-client-2:     #93c90e;
}

.theme-intertek {
    --color-accent:          #FFC908;
    --color-accent-hover:    #E5B500;
    --color-accent-dark:     #8C6E00;
    --color-accent-subtle:   rgba(255, 201, 8, 0.12);
    --color-accent-contrast: #1D2C3B;
    --color-accent-focus:    rgba(255, 201, 8, 0.45);
    --color-bg-client-1:     #FFC908;
    --color-bg-client-2:     #B58800;
}

.theme-descours {
    --color-accent:          #E40421;
    --color-accent-hover:    #C8031D;
    --color-accent-dark:     #8E0214;
    --color-accent-subtle:   rgba(228, 4, 33, 0.08);
    --color-accent-contrast: #FFFFFF;
    --color-accent-focus:    rgba(228, 4, 33, 0.35);
    --color-bg-client-1:     hsl(352, 97%, 45%);
    --color-bg-client-2:     hsl(60, 4%, 11%);
}


/* === css/base.css === */
/* ============================================================
   Oxil Share — Base CSS (Story 1.5)
   Reset minimal + html/body + @font-face Inter.
   ============================================================ */

/* ─── @font-face Inter (variable woff2 self-hosted) ────────── */
/* Note Story 1.5 : les fichiers .woff2 doivent être placés par OXIL dans
   public/assets/fonts/. Sans eux, le navigateur tombe sur le fallback
   system-ui (cohérent --font-sans dans tokens.css). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Inter-Variable-roman.woff2') format('woff2-variations');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/Inter-Variable-italic.woff2') format('woff2-variations');
}

/* ─── Reset minimal ─────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Inter variable features (cohérent mockup ligne 152) */
    font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* ─── Éléments de base ──────────────────────────────────── */

img,
svg,
video,
canvas,
audio,
iframe {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: var(--c-accent);
    text-decoration: none;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

/* ─── Accessibilité : focus visible ────────────────────── */

*:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── Reduced motion (WCAG) ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

/* ─── Scroll behavior ──────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ─── Sélection texte (couleur OXIL) ──────────────────── */

::selection {
    background-color: var(--c-accent-subtle);
    color: var(--c-accent-dark);
}


/* === components/admin-page.css === */
/* === Pages admin : largeur étendue (exploite mieux l'écran) === */
.admin-wide .nav-client__inner,
.admin-wide .client-main {
    max-width: min(1440px, 95vw);
}

/* === Page Administration (Story 6.2) ===
   `.page-header` legacy conservé pour compat (autres pages admin).
   `.client-admin-header` = pattern mockup section 12 (admin client header). */

.page-header {
    margin: var(--space-6) 0 var(--space-4);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-navy-800);
    margin: 0 0 var(--space-1);
}

.page-subtitle {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

/* === Client admin header (mockup section 12) ===
   Logo en pastille à gauche + nom + meta + badges à droite. */
.client-admin-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}
.client-admin-header__logo {
    width: 80px;
    height: 80px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    flex-shrink: 0;
    overflow: hidden;
}
.client-admin-header__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.client-admin-header__initials {
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--color-accent-dark);
}
.client-admin-header__info { flex: 1; min-width: 0; }
.client-admin-header__name {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    margin: 0 0 var(--space-1);
}
.client-admin-header__meta {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-3);
}
.client-admin-header__badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* === KPI grid (UX-DR22) — utilise .stat-card (canonique mockup) === */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-8);
}

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

/* === Highlight campaign (UX-DR23) === */
.highlight-campaign {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 14%, white), #fffaf0);
    border: 1px solid var(--color-tenant-primary, var(--color-accent, #f4a300));
    border-left: 4px solid var(--color-tenant-primary, var(--color-accent, #f4a300));
    border-radius: 0.5rem;
    padding: 0.85rem 1.25rem;
    margin: 1rem 0 1.5rem;
    font-size: 0.9375rem;
    color: #1d1300;
}

/* === Action grid (cards d'administration) === */
.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
}

@media (max-width: 900px) {
    .action-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .action-grid { grid-template-columns: 1fr; }
}

.action-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: inherit;
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.15rem;
    align-items: center;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.action-card:hover,
.action-card:focus-visible {
    border-color: var(--color-tenant-primary, var(--color-accent, #f4a300));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
    outline: none;
}

.action-card__icon {
    width: 44px; height: 44px;
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 14%, white);
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 78%, black);
    display: flex; align-items: center; justify-content: center;
}

.action-card__title {
    grid-column: 2; grid-row: 1;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text, #1d2c3b);
    align-self: end;
    line-height: 1.2;
}

.action-card__desc {
    grid-column: 2; grid-row: 2;
    font-size: 0.8125rem;
    color: #6b7280;
    align-self: start;
}

/* === Sections inline (admins, etc.) === */
.admin-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.admin-block__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    gap: 1rem;
}

.admin-list__row:last-child {
    border-bottom: 0;
}

.admin-list__email {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.admin-list__scope code {
    font-size: 0.8125rem;
    background: #f3f4f6;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
}

/* === Page Utilisateurs === */
.users-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.users-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.users-filters input[type="search"],
.users-filters select {
    padding: 0.4rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    background: #fff;
    min-width: 160px;
}

.users-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* === Toolbar bulk (apparait avec sélection multi-ligne) === */
.bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem;
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 10%, white);
    border: 1px solid var(--color-tenant-primary, var(--color-accent, #f4a300));
    border-radius: 0.5rem;
    animation: admin-flash-in 0.2s ease-out;
}

.bulk-toolbar[hidden] { display: none; }

.bulk-toolbar__count {
    font-size: 0.9375rem;
    color: var(--color-text, #1d2c3b);
}

.bulk-toolbar__count strong {
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 78%, black);
    font-weight: 700;
}

.bulk-toolbar__actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* === Wizard onboarding (Epic 8 — aligné mockup section 11 `.wiz-*`) === */
.wiz-stepper {
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--space-8);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-3);
    flex-wrap: nowrap;
    overflow-x: auto;
}

.wiz-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.wiz-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wiz-step.done .wiz-step__num {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.wiz-step.current .wiz-step__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
    box-shadow: 0 0 0 4px var(--color-accent-subtle);
}

.wiz-step__label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.wiz-step.current .wiz-step__label {
    color: var(--color-navy-800);
    font-weight: 600;
}

.wiz-step.done .wiz-step__label {
    color: var(--color-success-text);
}

.wiz-step__arrow {
    color: var(--color-text-subtle);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Wrapper dev-only — entoure le bloc body+footer */
.wiz-form-wrap {
    background: white;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.wiz-body {
    padding: var(--space-8);
    max-width: 720px;
    margin: 0 auto;
}

.wiz-body--lg { max-width: 920px; }

.wiz-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    margin: 0 0 var(--space-2);
}

.wiz-subtitle {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-6);
}

.wiz-footer {
    padding: var(--space-4) var(--space-8);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.wiz-footer__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Logo upload (étape branding) — extension dev (pas dans mockup) */
.logo-upload {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-bg-subtle);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.logo-upload__preview {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: white;
    border: 1px dashed var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.logo-upload__preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-upload__placeholder {
    color: var(--color-text-subtle);
    font-size: 0.75rem;
    text-align: center;
}

.logo-upload__controls {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Tree-builder (étape structure) */
.tree-builder {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.tree-builder__levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.tree-builder__levels input[type="text"] {
    flex: 1 1 100px;
    min-width: 100px;
    max-width: 200px;
}

.tree-builder__node {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    font-size: 0.875rem;
}

.tree-builder__handle {
    color: var(--color-text-subtle);
    cursor: grab;
    user-select: none;
}

.tree-builder__name {
    flex: 1;
    font-weight: 500;
    color: var(--color-navy-800);
}

.tree-builder__level-badge {
    font-size: 0.625rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.tree-builder__actions {
    display: flex;
    gap: 2px;
}

.tree-builder__icon-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--duration-base) var(--ease-smooth);
    font-size: 0.875rem;
    font-weight: 700;
}

.tree-builder__icon-btn:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent-dark);
}

.tree-builder__indent {
    padding-left: var(--space-6);
    border-left: 1.5px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
    margin-left: var(--space-2);
}

/* Color input (étape branding) */
.color-input {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.color-input__swatch {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    flex-shrink: 0;
    cursor: pointer;
    padding: 0;
    background: transparent;
}

.color-input__hex {
    flex: 1;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Choice cards (étape auth) */
.choice-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-smooth);
    background: white;
}

.choice-card:hover {
    border-color: var(--color-accent);
}

.choice-card.active {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.choice-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-accent-subtle);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.choice-card.active .choice-card__icon {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.choice-card__title {
    font-weight: 600;
    color: var(--color-navy-800);
    margin-bottom: 2px;
}

.choice-card__desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.choice-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin-top: var(--space-3);
}

.choice-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

/* Recap cards (étape 6) */
.recap-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-3);
}

.recap-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
}

.recap-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy-800);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.recap-card__edit {
    font-size: 0.75rem;
    color: var(--color-accent-dark);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-subtle);
    text-underline-offset: 2px;
}

.recap-card__edit:hover {
    text-decoration-color: var(--color-accent);
}

/* Admin row (étape 5) */
.admins-table .admin-row {
    display: grid;
    grid-template-columns: 1.8fr 1.4fr auto;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    background: white;
}

.admins-table .admin-row__email {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* === Stat-card (canonique mockup section 9 — KPIs admin OXIL + admin client) ===
   Base : flat (border + bg, pas d'ombre).
   Hover : translate-y -1px + shadow-card-hover (cf. polish maquette). */
.stat-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: transform var(--duration-base) var(--ease-smooth),
                box-shadow var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth);
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
}

.stat-card__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    line-height: 1.1;
}

.stat-card__trend {
    font-size: 0.75rem;
    color: var(--color-success-text);
    margin-top: var(--space-1);
}

/* === Clients-table header (titre + actions à droite) ===
   Single-line par défaut (titre · search · CTA). Wrap autorisé seulement
   sous `--bp-sm` pour éviter le débordement sur mobile. */
.clients-table__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: white;
}
@media (max-width: 640px) {
    .clients-table__header { flex-wrap: wrap; }
}

.clients-table__title {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--color-navy-800);
}

.clients-table__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.clients-table__search input[type="search"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    background: var(--color-bg-subtle);
    min-width: 200px;
}

/* === Page OXIL clients (Story 7.1) === */
.oxil-client-row {
    grid-template-columns: 2.4fr 0.8fr 1.4fr 1.6fr 0.8fr;
    text-decoration: none;
    color: inherit;
}

.oxil-client-row:hover {
    background: var(--color-accent-subtle);
}

/* Progress bar (canonique mockup) — pattern data-driven via CSS vars
   `--progress` (0-100%) sur `__fill` ; couleur via `--tenant-bar`
   (fallback `--color-accent` qui suit le ThemeInjector). */
.progress-bar {
    background: var(--color-bg-subtle);
    height: 6px;
    border-radius: var(--radius-full);
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 60px;
}

.progress-bar__fill {
    height: 100%;
    width: var(--progress, 0%);
    background: var(--tenant-bar, var(--color-accent));
    transition: width var(--duration-slow) var(--ease-smooth);
}

.client-percent {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-navy-800);
}

/* === Tableau utilisateurs (style `.clients-table` du mockup) === */
.clients-table {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.client-row {
    display: grid;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
    transition: background var(--duration-base) var(--ease-smooth);
}

.client-row:last-child { border-bottom: none; }

.client-row:not(.header):hover {
    background: var(--color-bg-subtle);
    cursor: pointer;
}

.client-row.header {
    background: var(--color-bg-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Grille spécifique page utilisateurs : checkbox · nom+email · manager · périmètre · actions */
.users-table-grid .client-row {
    grid-template-columns: 32px 2.4fr 1.6fr 1.6fr 80px;
}

.client-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    color: var(--color-navy-800);
    min-width: 0;
}

.client-name__stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.client-name__display {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-name__sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-logo-slot {
    width: 36px;
    height: 36px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-1);
}

.client-logo-slot--initials {
    background: var(--color-accent-subtle);
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: 0.75rem;
}

.client-count {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-campaign {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.client-campaign code {
    font-size: 0.8125rem;
    background: var(--color-bg-subtle);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .users-table-grid .client-row {
        grid-template-columns: 32px 1fr;
    }
    .users-table-grid .client-row > *:nth-child(n+3) {
        display: none;
    }
}

/* === Pager (style aligné mockup — boutons pill arrondis) === */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.25rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.pager__summary strong {
    color: var(--color-text, #1d2c3b);
}

.pager__controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: var(--color-text, #1d2c3b);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pager__btn:hover,
.pager__btn:focus-visible {
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 14%, white);
    border-color: var(--color-tenant-primary, var(--color-accent, #f4a300));
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 78%, black);
    outline: none;
}

.pager__btn--active {
    background: var(--color-tenant-primary, var(--color-accent, #f4a300));
    border-color: var(--color-tenant-primary, var(--color-accent, #f4a300));
    color: #fff;
    cursor: default;
}

.pager__btn--active:hover,
.pager__btn--active:focus-visible {
    background: var(--color-tenant-primary, var(--color-accent, #f4a300));
    color: #fff;
}

.pager__btn--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.pager__ellipsis {
    padding: 0 0.35rem;
    color: #9ca3af;
}

.pager__jump,
.pager__per {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0.25rem;
}

.pager__jump select,
.pager__per select {
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 0.8125rem;
    background: #fff;
    color: var(--color-text, #1d2c3b);
}

.pager__go {
    border: 1px solid #d1d5db;
    background: #fff;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-text, #1d2c3b);
}

.pager__go:hover,
.pager__go:focus-visible {
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 14%, white);
    border-color: var(--color-tenant-primary, var(--color-accent, #f4a300));
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 78%, black);
    outline: none;
}

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

/* === Explorateur de fichiers (2 colonnes) === */
.file-explorer {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 768px) {
    .file-explorer { grid-template-columns: 1fr; }
}

.file-explorer__tree {
    background: #f5f7fa;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.75rem;
    max-height: 70vh;
    overflow-y: auto;
    position: sticky;
    top: 1rem;
}

.file-explorer__tree-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    padding: 0 0.4rem 0.5rem;
}

.folder-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

.folder-tree__children {
    margin: 0.15rem 0 0 0.85rem;
    padding-left: 0.65rem;
    border-left: 1.5px dashed color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 30%, transparent);
}

.folder-tree__item {
    margin: 0.1rem 0;
}

.folder-tree__node {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.5rem;
    border-radius: 0.35rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}

.folder-tree__node:hover,
.folder-tree__node:focus-visible {
    background: #fff;
    color: var(--color-text, #1d2c3b);
    outline: none;
}

.folder-tree__node.is-active {
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 14%, white);
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 78%, black);
    font-weight: 600;
}

.folder-tree__node--root {
    margin: 0 0 0.4rem;
    border: 1px dashed transparent;
}

.folder-tree__icon { font-size: 0.95rem; }
.folder-tree__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-explorer__content {
    min-width: 0;
}

.file-explorer__breadcrumb {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-explorer__breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.file-explorer__breadcrumb a:hover { text-decoration: underline; }

.file-explorer__breadcrumb strong {
    color: var(--color-text, #1d2c3b);
    font-weight: 700;
}

.file-explorer__breadcrumb-sep {
    margin: 0 0.4rem;
    color: #9ca3af;
}

/* === Bar dépôt + modale upload (Story 6.4 UX) === */
.files-upload-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.15s, background 0.15s;
}

.files-upload-bar.is-dragover {
    border-color: var(--color-tenant-primary, var(--color-accent, #f4a300));
    border-style: solid;
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 10%, white);
}

.files-upload-bar.is-dragover .files-upload-bar__btn {
    pointer-events: none;
}

.files-upload-bar.is-dragover .section-hint::before {
    content: '↓ Déposez les fichiers ici · ';
    font-weight: 700;
    color: var(--color-tenant-primary, var(--color-accent, #f4a300));
}

.files-upload-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-tenant-primary, var(--color-accent, #f4a300));
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: filter 0.15s, transform 0.15s;
}

.files-upload-bar__btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

.upload-modal {
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
}

.upload-modal[hidden] { display: none; }

.upload-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.upload-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
}

.upload-modal__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #eef0f3;
}

.upload-modal__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.upload-modal__close {
    background: transparent; border: 0;
    font-size: 1.5rem; cursor: pointer;
    color: #6b7280;
    line-height: 1;
}

.upload-modal__meta {
    margin: 0;
    padding: 0.75rem 1.25rem 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.upload-modal__body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.upload-modal__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.upload-modal__table thead {
    background: #f5f7fa;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

.upload-modal__table th,
.upload-modal__table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.upload-modal__file-name {
    font-weight: 600;
    color: var(--color-text, #1d2c3b);
    word-break: break-all;
    line-height: 1.2;
}

.upload-modal__file-raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.2rem;
    word-break: break-all;
}

.upload-modal__file-size-col {
    color: #6b7280;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.upload-modal__row--invalid {
    background: color-mix(in srgb, #b91c1c 4%, white);
}

.upload-modal__row--invalid .upload-modal__file-name {
    color: #6b7280;
    text-decoration: line-through;
}

.upload-modal__row--warn {
    background: color-mix(in srgb, #f59e0b 6%, white);
}

.upload-modal__error--warn {
    background: #fff3d6 !important;
    color: #92400e !important;
}

.upload-modal__error {
    margin: 0;
    padding: 0.6rem 1.25rem;
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.8125rem;
    font-weight: 600;
    border-top: 1px solid #eef0f3;
    flex-shrink: 0;
}

/* Pastille audience (Story 6.4 — qui peut voir un fichier) */
.audience-chip {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.audience--personal { background: var(--color-success-subtle); color: var(--color-success-text); }
.audience--team     { background: var(--color-info-subtle);    color: var(--color-info-text); }
.audience--admin    { background: var(--color-danger-subtle);  color: var(--color-danger-text); }
.audience--manager  { background: var(--color-accent-subtle);  color: var(--color-accent-dark); }
.audience--all      { background: var(--color-success-subtle); color: var(--color-success-text); }
.audience--scope    { background: var(--color-bg-subtle);      color: var(--color-text-muted); }
.audience--warn     { background: var(--color-warning-subtle); color: var(--color-warning-text); }

.upload-modal__progress {
    margin-top: 1rem;
    background: #f5f7fa;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    height: 1.25rem;
    text-align: center;
}

.upload-modal__progress-bar {
    height: 100%;
    background: var(--color-tenant-primary, var(--color-accent, #f4a300));
    width: 0%;
    transition: width 0.2s ease;
}

.upload-modal__progress span {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1d2c3b;
}

.upload-modal__footer {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #eef0f3;
    background: #f9fafb;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* (legacy form — conservé pour fallback no-JS) */
.files-upload-form {
    display: grid;
    grid-template-columns: 2fr 1.6fr auto;
    gap: 0.5rem;
    align-items: end;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .files-upload-form { grid-template-columns: 1fr; }
}

.files-upload-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.files-upload-form__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    font-weight: 600;
}

.files-upload-form input[type="text"],
.files-upload-form input[type="file"] {
    padding: 0.4rem 0.65rem;
    border: 1px solid #d1d5db;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    background: #fff;
}

/* === Flash messages admin (toast flottant, ne décale pas le DOM) === */
.admin-flash {
    position: fixed;
    top: 5rem;
    right: var(--space-6);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    box-shadow: var(--shadow-card-hover);
    max-width: min(420px, calc(100% - var(--space-12)));
    animation: admin-flash-in var(--duration-base) var(--ease-smooth);
}

@media (max-width: 640px) {
    .admin-flash {
        top: auto;
        bottom: var(--space-4);
        left: var(--space-4);
        right: var(--space-4);
        max-width: none;
    }
}

@keyframes admin-flash-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.admin-flash--error {
    background: var(--color-danger-subtle);
    border: 1px solid var(--color-danger);
    color: var(--color-danger-text);
    font-weight: 600;
}

.admin-flash--success {
    background: var(--color-success-subtle);
    border: 1px solid var(--color-success);
    color: var(--color-success-text);
}

.admin-flash--info {
    background: var(--color-info-subtle);
    border: 1px solid var(--color-info);
    color: var(--color-info-text);
}

.admin-flash__icon { font-size: 1.125rem; flex-shrink: 0; }
.admin-flash__message { flex: 1 1 auto; }

.admin-flash__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.6;
    padding: 0 var(--space-1);
}

.admin-flash__close:hover { opacity: 1; }

.files-mkdir-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
}

.files-mkdir-form__icon {
    font-size: 1rem;
}

.files-mkdir-form input[type="text"] {
    flex: 1 1 auto;
    padding: 0.35rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 0.35rem;
    font-size: 0.875rem;
}

.files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.files-table thead {
    background: #f5f7fa;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}

.files-table th,
.files-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.files-table tbody tr:last-child td {
    border-bottom: 0;
}

.files-table__row--folder {
    cursor: pointer;
}

.files-table__row--folder:hover {
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 8%, white);
}

.files-table__name,
.files-table__name-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.files-table__icon {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Chaîne lien : teinte accent (cohérent Mon espace) */
.files-table__icon--lien { color: var(--color-accent-dark); }

.files-table__name-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.files-table__display {
    font-weight: 600;
    color: var(--color-text, #1d2c3b);
    line-height: 1.2;
    word-break: break-word;
}

.files-table__raw {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.15rem;
    word-break: break-all;
}

.files-table__muted {
    color: #6b7280;
    white-space: nowrap;
}

.files-table__actions {
    text-align: right;
    white-space: nowrap;
}

/* Cellule actions admin (eye / pencil / trash) — horizontal, jamais empilé.
   Le `<form>` autour du bouton 🗑 est passé en `display: contents` pour
   ne pas casser le flux flex. */
.files-table-grid__actions,
.files-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: nowrap;
}
.files-table-grid__actions form,
.files-table__actions form {
    display: contents;
}

.client-name--no-avatar { padding-left: 0; }

.file-row {
    text-decoration: none;
    color: inherit;
}

.file-row--folder:hover {
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #f4a300)) 8%, white);
}

.btn-danger {
    color: #b91c1c !important;
    font-size: 1rem;
    line-height: 1;
}

.btn-danger:hover {
    background: color-mix(in srgb, #b91c1c 10%, white) !important;
    border-color: #b91c1c !important;
}

@media (max-width: 768px) {
    .files-table-grid .client-row {
        grid-template-columns: 32px 1fr 60px;
    }
    .files-table-grid .client-row > *:nth-child(3),
    .files-table-grid .client-row > *:nth-child(4) {
        display: none;
    }
}

.admin-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* === components/admins-modal.css === */
/* === Modale Admins (Story 6.5 — aligné mockup section 9 `.admin-tree` + `.scope-radio` + `.scope-preview`) === */

.admins-modal {
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
}
.admins-modal[hidden] { display: none; }

.admins-modal__overlay {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.admins-modal__panel {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    width: min(680px, 95%);
    max-height: calc(100vh - var(--space-12));
    display: flex; flex-direction: column;
    border: 1px solid var(--color-border);
}

.admins-modal__header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-4);
}
.admins-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-navy-800);
}
.admins-modal__meta {
    margin-top: var(--space-1);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}
.admins-modal__close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.5rem; line-height: 1;
    padding: var(--space-1) var(--space-2);
}
.admins-modal__close:hover { color: var(--color-navy-800); }

.admins-modal__body {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    flex: 1 1 auto;
}

.admins-modal__section {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
    display: block;
}

.input-group { margin-bottom: var(--space-4); }
.input-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy-800);
    margin-bottom: var(--space-2);
}
.input-field {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    background: white;
    color: var(--color-text);
}
.input-field:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}
.input-field:disabled, .input-field[readonly] {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.input-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* === Radios scope === */
.scope-radio-group {
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.scope-radio {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-smooth);
}
.scope-radio:hover {
    border-color: var(--color-accent);
}
.scope-radio.active {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}
.scope-radio.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.scope-radio input[type="radio"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.scope-radio__bullet {
    width: 18px; height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}
.scope-radio.active .scope-radio__bullet {
    border-color: var(--color-accent);
}
.scope-radio.active .scope-radio__bullet::after {
    content: '';
    position: absolute; inset: 3px;
    background: var(--color-accent);
    border-radius: 50%;
}
.scope-radio__content { display: flex; flex-direction: column; }
.scope-radio__title {
    font-weight: 600;
    color: var(--color-navy-800);
    margin-bottom: 2px;
    font-size: 0.9375rem;
}
.scope-radio__desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* === Arbre admin === */
.admins-modal__tree-wrap {
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.admin-tree {
    list-style: none;
    margin: 0; padding: 0;
    font-size: 0.875rem;
}
.admin-tree__item { margin-bottom: var(--space-1); }
.admin-tree__node {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 4px var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-smooth);
}
.admin-tree__node:hover { background: white; }
.admin-tree__cb { position: absolute; opacity: 0; pointer-events: none; }
.admin-tree__checkbox {
    width: 18px; height: 18px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 4px;
    background: white;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all var(--duration-base) var(--ease-smooth);
}
.admin-tree__node.checked .admin-tree__checkbox {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}
.admin-tree__node.indeterminate .admin-tree__checkbox {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}
.admin-tree__checkbox-icon {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.admin-tree__name {
    flex: 1 1 auto;
    color: var(--color-text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-tree__node.checked .admin-tree__name,
.admin-tree__node.indeterminate .admin-tree__name {
    font-weight: 600;
    color: var(--color-navy-800);
}
.admin-tree__level {
    font-size: 0.625rem;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-left: auto;
}
.admin-tree__children {
    list-style: none;
    margin: var(--space-1) 0 0 var(--space-3);
    padding-left: var(--space-3);
    border-left: 1.5px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* === Preview scope === */
.scope-preview {
    background: white;
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
}
.scope-preview__title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-success-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}
.scope-preview__list {
    margin: 0;
    padding-left: var(--space-5);
    font-size: 0.8125rem;
    color: var(--color-text);
}
.scope-preview__list li { margin-bottom: 2px; }
.scope-preview__empty { color: var(--color-text-subtle); list-style: none; margin-left: calc(-1 * var(--space-5)); }

/* === Mode super admin (override visuel) === */
.scope-preview--super {
    border-color: var(--color-accent);
}
.scope-preview--super .scope-preview__title {
    color: var(--color-accent-dark);
}

/* === Permissions === */
.admins-modal__perms {
    border: 0;
    padding: 0;
    margin: var(--space-4) 0 0;
}
.admins-modal__perms legend {
    margin-bottom: var(--space-1);
    padding: 0;
}
.admins-modal__perm {
    display: block;
    padding: var(--space-1) 0;
    font-size: 0.875rem;
    color: var(--color-text);
}

.admins-modal__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}


/* === components/bsi-consolidated-table.css === */
/* === Tableau consolidé BSI multi-années (Story 4.5) === */

.bsi-main { max-width: 1200px; }

.bsi-toolbar {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1rem; flex-wrap: wrap;
}
.bsi-search {
    flex: 1 1 280px; min-width: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    background: #fff;
}
.bsi-search:focus {
    outline: 2px solid var(--color-tenant-accent, #2ebfbf);
    outline-offset: 1px;
}
.bsi-toolbar__count {
    font-size: 0.875rem; color: var(--color-text-muted, #5e6770);
}

.bsi-consolidated-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.bsi-consolidated-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.bsi-consolidated-table thead th {
    background: var(--color-bg-subtle, #f3f4f6);
    color: var(--color-text, #1d2c3b);
    font-weight: 700;
    text-align: center;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--color-border, #e5e7eb);
    position: sticky; top: 0; z-index: 2;
}
.bsi-consolidated-table thead th:first-child {
    text-align: left;
    z-index: 3;
    left: 0;
}
.bsi-consolidated-table tbody th[scope="row"] {
    text-align: left; font-weight: 500;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    background: #fff;
    position: sticky; left: 0; z-index: 1;
    min-width: 200px;
}
.bsi-consolidated-table tbody td {
    text-align: center;
    padding: 0.625rem 0.5rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    white-space: nowrap;
}
.bsi-consolidated-table tbody tr:hover th,
.bsi-consolidated-table tbody tr:hover td {
    background: var(--color-bg-subtle, #f7f7f9);
}

.bsi-cell-user__name {
    font-weight: 600;
    color: var(--color-text, #1d2c3b);
}
.bsi-cell-user__email {
    font-size: 0.75rem;
    color: var(--color-text-muted, #5e6770);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    margin-top: 2px;
    word-break: break-all;
}

.bsi-cell-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 1.125rem;
    transition: background 0.15s;
}
.bsi-cell-link + .bsi-cell-link { margin-left: 0.25rem; }
.bsi-cell-link:hover,
.bsi-cell-link:focus-visible {
    background: var(--color-bg-subtle, #f3f4f6);
    outline: none;
}

.bsi-cell-empty {
    color: var(--color-text-muted, #9ca3af);
    font-size: 1rem;
}

.bsi-th-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.bsi-th-sort:hover { color: var(--color-tenant-primary, #8c78fe); }

.bsi-pagination {
    display: flex; gap: 1rem; align-items: center; justify-content: center;
    padding: 1rem; flex-wrap: wrap;
    font-size: 0.9375rem;
}
.bsi-pagination a {
    color: var(--color-tenant-primary, #8c78fe);
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-border, #e5e7eb);
}
.bsi-pagination a:hover {
    background: var(--color-bg-subtle, #f3f4f6);
}

@media (max-width: 768px) {
    .bsi-consolidated-table {
        font-size: 0.875rem;
    }
    .bsi-consolidated-table tbody th[scope="row"] {
        min-width: 160px;
    }
    .bsi-cell-user__email { display: none; }
    .bsi-cell-link { font-size: 1rem; padding: 0.2rem 0.4rem; }
}


/* === components/btn.css === */
/* ============================================================
   Component : .btn  (Story 1.6)

   Source canonique : ux-design-final-mockup.html, section 5 (lignes 338-389)
   et polish § lignes 3354-3356.

   5 variantes : primary, primary-signature, secondary, tertiary, danger.
   3 tailles : sm, base, lg. Modificateur full-width.
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: var(--space-3) var(--space-5);
    font-size: 0.875rem;
    transition: all var(--duration-base) var(--ease-smooth);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.btn .icon {
    width: 18px;
    height: 18px;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.btn:not(:disabled):active {
    transform: translateY(0);
}

/* ─── Variantes ─────────────────────────────────────────────── */

.btn--primary-signature {
    background: linear-gradient(135deg, var(--color-bg-client-1) 0%, var(--color-bg-client-2) 100%);
    color: var(--color-accent-contrast);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
    border: none;
}
.btn--primary-signature:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.btn--primary {
    background: var(--color-tenant-primary, var(--color-accent));
    color: var(--color-accent-contrast);
}
.btn--primary:hover:not(:disabled) {
    background: var(--color-tenant-accent, var(--color-accent-hover));
    transform: translateY(-1px);
}

.btn--secondary {
    background: transparent;
    color: var(--color-tenant-primary, var(--color-tenant-primary-dark, var(--color-accent-dark)));
    border: 1px solid var(--color-tenant-primary, var(--color-accent));
}
.btn--secondary:hover:not(:disabled) {
    background: var(--color-tenant-accent-subtle, var(--color-accent-subtle));
    color: var(--color-tenant-accent, var(--color-tenant-accent-dark, var(--color-accent-hover)));
    border-color: var(--color-tenant-accent, var(--color-accent-hover));
}

/* Alias visuel de .btn--secondary : mêmes couleurs (primary par défaut,
   accent au survol). Conservé comme classe distincte pour les emplacements
   où l'on veut un bouton « secondaire signature » explicite. */
.btn--secondary-signature {
    background: transparent;
    color: var(--color-tenant-primary, var(--color-tenant-primary-dark, var(--color-accent-dark)));
    border: 1px solid var(--color-tenant-primary, var(--color-accent));
}
.btn--secondary-signature:hover:not(:disabled) {
    background: var(--color-tenant-accent-subtle, var(--color-accent-subtle));
    color: var(--color-tenant-accent, var(--color-tenant-accent-dark, var(--color-accent-hover)));
    border-color: var(--color-tenant-accent, var(--color-accent-hover));
}

.btn--tertiary {
    background: transparent;
    color: var(--color-tenant-primary, var(--color-tenant-primary-dark, var(--color-accent-dark)));
    border: none;
    padding: var(--space-2) var(--space-3);
}
.btn--tertiary:hover:not(:disabled) {
    background: var(--color-tenant-accent-subtle, var(--color-accent-subtle));
}

.btn--danger {
    background: var(--color-danger);
    color: white;
    border: none;
}
.btn--danger:hover:not(:disabled) {
    background: var(--color-danger-text);
}

/* ─── Tailles ──────────────────────────────────────────────── */

.btn--lg {
    padding: var(--space-4) var(--space-6);
    font-size: 1rem;
}

.btn--sm {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
}

/* Très compact — contextes denses (file rows, listes répétitives) */
.btn--xs {
    padding: 4px var(--space-2);
    font-size: 0.75rem;
    gap: 4px;
}

/* Carré arrondi icon-only — tables admin (eye, pencil, trash)
   On override le pill `--radius-full` du .btn par un radius-md. */
.btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    font-size: 1rem;
    line-height: 1;
}
/* ─── Icônes via CSS mask-image ──────────────────────────────────
   Pattern : <span class="icon icon--{name}"></span>
   Le `background-color: currentColor` prend la couleur du bouton parent.
   Le `mask-image` est un SVG monochrome embedded en data URL.

   ⚠ Sélecteur restreint : `.icon[class*="icon--"]` pour ne PAS écraser
   les `<svg class="icon">` legacy du hero-bsi et autres composants.
   ─────────────────────────────────────────────────────────────── */
.icon[class*="icon--"] {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.icon--eye {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
.icon--pencil {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/></svg>");
}
.icon--trash {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 6 5 6 21 6'/><path d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/><path d='M10 11v6'/><path d='M14 11v6'/><path d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/></svg>");
}
.icon--check {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.icon--x {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6L6 18'/><path d='M6 6l12 12'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6L6 18'/><path d='M6 6l12 12'/></svg>");
}
.icon--plus {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14'/><path d='M5 12h14'/></svg>");
}
.icon--folder {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
}
.icon--folder-open {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14l1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'/></svg>");
}
.btn--icon.btn--sm { width: 32px; height: 32px; font-size: 0.875rem; }

.btn--full {
    width: 100%;
}

/* ─── Mobile : min-height 48px (WCAG 2.5.5 Target Size) ───── */
@media (max-width: 639px) {
    .btn--full {
        min-height: 48px;
        white-space: normal;
        line-height: 1.3;
    }
}


/* === components/content-editor-modal.css === */
/* === Modale éditeur contenu (.note + .lien) admin/documents ===
   Style aligné mockup admins-modal (panel 680px, blur backdrop, header/footer
   sticky). Trix integration via .trix-content + .trix-toolbar. */

.content-editor-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-editor-modal[hidden] { display: none; }

.content-editor-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.content-editor-modal__panel {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    width: min(720px, 95%);
    max-height: calc(100vh - var(--space-12));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.content-editor-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-3);
}

.content-editor-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-navy-800);
    word-break: break-word;
}

.content-editor-modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: var(--space-1) var(--space-2);
}
.content-editor-modal__close:hover { color: var(--color-navy-800); }

.content-editor-modal__body {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    flex: 1 1 auto;
}

.content-editor-modal__fields { display: block; }
.content-editor-modal__fields[hidden] { display: none; }

.content-editor-modal__error {
    background: var(--color-danger-subtle);
    color: var(--color-danger-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    margin: var(--space-3) 0 0;
}
.content-editor-modal__error[hidden] { display: none; }

.content-editor-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Trix : aligner sur le design system */
.content-editor-modal__trix {
    display: block;
    min-height: 220px;
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: white;
    font-family: var(--font-display);
    line-height: 1.5;
}
.content-editor-modal__trix:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}
trix-toolbar {
    border: 1px solid var(--color-border);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-bg-subtle);
    padding: var(--space-2) var(--space-3);
}
trix-toolbar + .content-editor-modal__trix {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Trix : les dialogs (link picker, etc.) doivent rester masqués par défaut.
   Trix s'appuie habituellement sur l'attribut `hidden` du browser, mais
   certaines versions/configs CSP créent des dialogs visibles au chargement
   tant qu'aucun toggle JS n'a appliqué `data-trix-active`. */
trix-toolbar .trix-dialog {
    display: none;
}
trix-toolbar .trix-dialog[data-trix-active] {
    display: block;
}

/* Barre "+ Nouvelle note / + Nouveau lien" */
.files-create-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/* Empêche le scroll du body quand modale ouverte */
body.is-modal-open {
    overflow: hidden;
}


/* === components/dashboard-tabs.css === */
/* === Onglets dashboard tenant (Story 5.1) === */

.dashboard-tabs {
    display: flex;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge legacy */
}
.dashboard-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.dashboard-tabs__btn {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth);
}

.dashboard-tabs__btn:hover,
.dashboard-tabs__btn:focus-visible {
    color: var(--color-accent);
    outline: none;
}

.dashboard-tabs__btn--active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.dashboard-tab-content[hidden] { display: none; }

@media (max-width: 640px) {
    .dashboard-tabs__btn { padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
}

/* === Sous-onglets "Mon équipe" (segmented control) === */

.subtabs {
    display: inline-flex;
    gap: var(--space-1);
    padding: var(--space-1);
    margin: 0 0 var(--space-6);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.subtabs__btn {
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--duration-base) var(--ease-smooth),
                color var(--duration-base) var(--ease-smooth);
}

.subtabs__btn:hover,
.subtabs__btn:focus-visible {
    color: var(--color-accent);
    outline: none;
}

.subtabs__btn--active {
    background: var(--color-white);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.subpanel[hidden] { display: none; }

@media (max-width: 640px) {
    .subtabs { display: flex; }
    .subtabs__btn { flex: 1; padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
}


/* === components/form.css === */
/* ============================================================
   Component : .input-field + helpers (Story 1.6)
   ============================================================ */

.input-field {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: inherit;
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-base) var(--ease-smooth),
                box-shadow var(--duration-base) var(--ease-smooth);
}

.input-field::placeholder {
    color: var(--c-text-subtle);
}

.input-field:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-focus);
}

.input-field:disabled {
    background-color: var(--c-navy-100);
    color: var(--c-text-muted);
    cursor: not-allowed;
}

.input-field--error {
    border-color: var(--c-error);
}
.input-field--error:focus {
    border-color: var(--c-error);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}

/* ─── Helpers ──────────────────────────────────────────── */

.input-helper {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

.input-error-message {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--c-error);
    font-weight: var(--fw-medium);
}

/* ─── Label ────────────────────────────────────────────── */

.input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text);
}

/* ─── Group (label + input + helper) ───────────────────── */

.input-group {
    margin-bottom: var(--space-4);
}


/* === components/hero-bsi.css === */
/* === Hero BSI dashboard salarié (Story 3.7) — aligné mockup screen 3 === */

.hero-bsi {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow:
        0 1px 3px rgba(29, 44, 59, 0.04),
        0 16px 40px color-mix(in srgb, var(--color-tenant-accent, #2ebfbf) 10%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Top border 10px gradient client (primary → secondary) */
.hero-bsi::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(
        90deg,
        var(--color-tenant-primary, #8c78fe) 0%,
        var(--color-tenant-secondary, #1d2c3b) 100%
    );
    pointer-events: none;
}

.hero-bsi:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px rgba(29, 44, 59, 0.06),
        0 24px 60px color-mix(in srgb, var(--color-tenant-accent, #2ebfbf) 18%, transparent);
}

.hero-bsi__icon {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 0.625rem;
    background: linear-gradient(
        135deg,
        var(--color-tenant-primary, #8c78fe) 0%,
        var(--color-tenant-secondary, #1d2c3b) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1.25rem;
}

.hero-bsi__eyebrow {
    position: relative;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-tenant-accent, #2ebfbf) 80%, black);
    margin-bottom: 0.5rem;
}

.hero-bsi__year {
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-secondary, #1d2c3b);
    margin-bottom: 0.5rem;
}

.hero-bsi__meta {
    position: relative;
    font-size: 0.9375rem;
    color: var(--color-text-muted, #5e6770);
    margin-bottom: 1.5rem;
}

.hero-bsi__actions {
    position: relative;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* === Boutons : `components/btn.css` est la seule source de vérité ===
   La duplication précédente de `.btn--secondary` ici écrasait la couleur
   primary/hover-accent voulue. Supprimée — voir btn.css. */

/* === Historique BSI === */
.bsi-history-section {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.bsi-history {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.bsi-history__card {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.bsi-history__card:hover {
    border-color: var(--color-tenant-accent, #2ebfbf);
    box-shadow: 0 2px 8px rgba(29, 44, 59, 0.06);
    transform: translateY(-1px);
}

.bsi-history__year {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-secondary, #1d2c3b);
    margin-bottom: 0.5rem;
}

.bsi-history__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* === Responsive === */
@media (max-width: 640px) {
    .hero-bsi {
        padding: 1.5rem 1.25rem;
    }
    .hero-bsi__year {
        font-size: 1.875rem;
    }
    .hero-bsi__actions {
        flex-direction: column;
    }
    .hero-bsi__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .bsi-history {
        grid-template-columns: 1fr 1fr;
    }
}


/* === components/impersonation-banner.css === */
/* === Impersonation banner (Story 2.11 AC10) ===
 * Bandeau sticky non-équivoque pendant le mode "Voir comme X".
 * ISO 27001 + RGPD : alerte visible PERMANENTE, non cachable.
 */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: var(--color-warning);
    color: var(--color-warning-text);
    border-bottom: 2px solid var(--color-warning-text);
    font-size: 0.9375rem;
    line-height: 1.4;
    box-shadow: var(--shadow-card);
}

.impersonation-banner__icon {
    font-size: 1.25rem;
}

.impersonation-banner__message {
    flex: 1 1 auto;
}

.impersonation-banner__viewed {
    font-weight: 700;
}

.impersonation-banner__real {
    opacity: 0.85;
    font-size: 0.875rem;
}

.impersonation-banner__cumul {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.12);
}

.impersonation-banner__stop-form {
    margin: 0;
    flex: 0 0 auto;
}

.impersonation-banner__stop-btn {
    background: var(--color-warning-text);
    color: white;
    border: 1px solid var(--color-warning-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-smooth),
                box-shadow var(--duration-base) var(--ease-smooth);
}

.impersonation-banner__stop-btn:hover,
.impersonation-banner__stop-btn:focus-visible {
    background: black;
    outline: 2px solid white;
    outline-offset: 1px;
}


/* === components/intro-block.css === */
/* === Intro personnalisée par scope (Story 3.8) === */

.intro-block {
    background: color-mix(in srgb, var(--color-tenant-accent, #2ebfbf) 6%, white);
    border-left: 3px solid var(--color-tenant-accent, #2ebfbf);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--color-text, #1d2c3b);
}

.intro-block__content {
    max-width: 65ch;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.intro-block__content > :first-child { margin-top: 0; }
.intro-block__content > :last-child  { margin-bottom: 0; }

.intro-block__content h1,
.intro-block__content h2,
.intro-block__content h3 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.3;
}
.intro-block__content h1 { font-size: 1.25rem; }
.intro-block__content h2 { font-size: 1.125rem; }
.intro-block__content h3 { font-size: 1rem; }
.intro-block__content p { margin: 0.5em 0; }
.intro-block__content ul,
.intro-block__content ol {
    padding-left: 1.5em;
    margin: 0.5em 0;
}
.intro-block__content li { margin: 0.25em 0; }
.intro-block__content a {
    color: var(--color-tenant-primary, #8c78fe);
    text-decoration: underline;
}
.intro-block__content a:hover { text-decoration: none; }
.intro-block__content code {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
    font-family: "JetBrains Mono", Consolas, Monaco, monospace;
    font-size: 0.875em;
}
.intro-block__content blockquote {
    border-left: 3px solid var(--color-tenant-primary, #8c78fe);
    padding-left: 1em;
    margin: 0.75em 0;
    color: var(--color-text-muted, #5e6770);
}

@media (max-width: 640px) {
    .intro-block { padding: 1rem 1.25rem; }
    .intro-block__content { font-size: 0.875rem; }
}


/* === components/language-switcher.css === */
/* ============================================================
   Sélecteur de langue (login : inline · dashboard : dropdown)
   ============================================================ */

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.lang-switch__form {
    margin: 0;
    display: inline-flex;
}

.lang-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lang-switch__btn:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.lang-switch__btn--active {
    color: var(--color-text);
    border-color: var(--color-border);
    background: var(--color-bg-subtle);
    font-weight: 600;
}

.lang-switch__flag {
    font-size: 1rem;
}

.lang-switch__code {
    letter-spacing: 0.02em;
}

/* ── Variante inline (login, en haut à droite) ─────────────── */
.lang-switch--inline {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Variante dropdown (dashboard, nav-client__user) ───────── */
.lang-switch--dropdown {
    position: relative;
    gap: 0;
}

.lang-switch--dropdown > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.lang-switch--dropdown > summary::-webkit-details-marker {
    display: none;
}

.lang-switch--dropdown > summary:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

.lang-switch__chevron {
    transition: transform .15s ease;
}

.lang-switch--dropdown[open] .lang-switch__chevron {
    transform: rotate(180deg);
}

.lang-switch__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 9rem;
    padding: var(--space-1);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.lang-switch__menu .lang-switch__form {
    display: block;
}

.lang-switch__menu .lang-switch__btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
}


/* === components/modal-consultations.css === */
/* === Modale "Qui a consulté ?" (Story 5.3) === */

.modal-consultations {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-consultations[hidden] {
    display: none;
}

.modal-consultations__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

.modal-consultations__panel {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    width: min(640px, calc(100% - var(--space-8)));
    max-height: calc(100vh - var(--space-16));
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}

.modal-consultations__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-2);
}

.modal-consultations__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-navy-800);
    word-break: break-word;
}

.modal-consultations__meta {
    margin: var(--space-1) 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.modal-consultations__close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: var(--space-1) var(--space-2);
}

.modal-consultations__close:hover,
.modal-consultations__close:focus-visible {
    color: var(--color-navy-800);
    outline: none;
}

.modal-consultations__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    background: white;
}

.modal-consultations__chip {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-smooth),
                color var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth);
}

.modal-consultations__chip:hover,
.modal-consultations__chip:focus-visible {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    outline: none;
}

.modal-consultations__chip.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

.modal-consultations__search {
    padding: var(--space-2) var(--space-5);
}

.modal-consultations__search-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}
.modal-consultations__search-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-color: var(--color-accent);
}

.modal-consultations__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    border-top: 1px solid var(--color-border);
}

.modal-consultations__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.modal-consultations__row[hidden] {
    display: none;
}

.modal-consultations__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent-subtle);
    color: var(--color-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex: 0 0 32px;
}

.modal-consultations__row-info {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-consultations__row-name {
    font-weight: 600;
    color: var(--color-navy-800);
    font-size: 0.9375rem;
}

.modal-consultations__row-email {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-consultations__row-status {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: right;
}

.modal-consultations__row-status--consulted {
    color: var(--color-success-text);
}

.modal-consultations__row-status--not-consulted {
    color: var(--color-text-subtle);
}

.modal-consultations__empty,
.modal-consultations__loading {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
}

.modal-consultations__copy-feedback {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-right: auto;
    align-self: center;
    color: var(--color-success-text);
}

.modal-consultations__copy-feedback[data-ok="0"] {
    color: var(--color-danger-text);
}

.modal-consultations__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* === Bouton sur file-card === */
.btn-consultations {
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-consultations svg {
    display: block;
}

/* === Mobile : modale fullscreen (AC10, UX-DR10) === */
@media (max-width: 640px) {
    .modal-consultations__panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}


/* === components/modal.css === */
/* ============================================================
   Component : .modal (Story 1.6)
   Cohérent UX-DR10 — fullscreen mobile, fade + scale-up 200ms.
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
    animation: modal-overlay-in var(--duration-base) var(--ease-smooth);
}

.modal {
    position: relative;
    background-color: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: calc(100vh - 2 * var(--space-4));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-in var(--duration-base) var(--ease-smooth);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--c-border);
}

.modal__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    margin: 0;
}

.modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 1.25rem;
    line-height: 1;
}
.modal__close:hover {
    background-color: var(--c-navy-100);
    color: var(--c-text);
}

.modal__body {
    flex: 1 1 auto;
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    color: var(--c-text);
}

.modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

/* ─── Animations ───────────────────────────────────────── */

@keyframes modal-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ─── Mobile : fullscreen ──────────────────────────────── */

@media (max-width: 639px) {
    .modal-overlay {
        padding: 0;
    }
    .modal {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}


/* === components/nav-oxil.css === */
/* === Nav-OXIL (Story 7.2) === */

.nav-oxil {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.65rem 0;
}

.nav-oxil__inner {
    max-width: min(1440px, 95vw);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.nav-oxil__spacer { flex: 1 1 auto; }

.nav-oxil__brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-oxil__product {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.nav-oxil__back {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.nav-oxil__back:hover {
    background: #e5e7eb;
    color: var(--color-text, #1d2c3b);
}

.nav-oxil__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-oxil__logo {
    max-height: 32px;
    max-width: 120px;
}

.nav-oxil__tenant {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text, #1d2c3b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-oxil__chip {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #8c78fe)) 14%, white);
    color: color-mix(in srgb, var(--color-tenant-primary, var(--color-accent, #8c78fe)) 78%, black);
}

.nav-oxil__user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
}

.nav-oxil__user-name {
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.nav-oxil__logout {
    color: #6b7280;
    padding: 0.35rem;
    border-radius: 0.35rem;
    transition: background 0.15s, color 0.15s;
}

.nav-oxil__logout:hover {
    background: #f3f4f6;
    color: var(--color-text, #1d2c3b);
}


/* === components/note-modal.css === */
/* === Modale .note (Story 3.5) === */

dialog.note-modal {
    border: none;
    border-left: 6px solid var(--color-tenant-primary, #2ebfbf);
    padding: 0;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 720px;
    width: calc(100% - 2rem);
    max-height: 85vh;
    overflow: hidden;
    background: #fff;
    color: var(--color-text, #1d2c3b);
    /* Centrage vertical + horizontal — `<dialog>` natif n'est pas centré
       sur tous les navigateurs avec un max-height/width custom */
    margin: auto;
    inset: 0;
}
dialog.note-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.note-modal__inner {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.note-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    gap: 1rem;
}

.note-modal__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text, #1d2c3b);
    word-break: break-word;
}

.note-modal__close {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--color-text-muted, #5e6770);
    cursor: pointer;
    padding: 0 0.25rem;
}
.note-modal__close:hover,
.note-modal__close:focus-visible {
    color: var(--color-tenant-primary, #8c78fe);
    outline: none;
}

.note-modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.note-modal__loader,
.note-modal__error {
    color: var(--color-text-muted, #5e6770);
    text-align: center;
    padding: 2rem 1rem;
}
.note-modal__error {
    color: var(--color-danger, #c0392b);
}

.note-modal__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    text-align: right;
}

.note-content {
    max-width: 65ch;
    margin: 0 auto;
    line-height: 1.7;
    color: var(--color-text, #1d2c3b);
    font-size: 0.9375rem;
}
.note-content h1, .note-content h2, .note-content h3,
.note-content h4, .note-content h5, .note-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.3;
}
.note-content h1 { font-size: 1.5rem; }
.note-content h2 { font-size: 1.25rem; }
.note-content h3 { font-size: 1.125rem; }
.note-content p { margin: 0.75em 0; }
.note-content ul, .note-content ol {
    padding-left: 1.5em;
    margin: 0.75em 0;
}
.note-content li { margin: 0.25em 0; }
.note-content a {
    color: var(--color-tenant-primary, #8c78fe);
    text-decoration: underline;
}
.note-content code {
    background: var(--color-bg-subtle, #f3f4f6);
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
    font-family: "JetBrains Mono", Consolas, Monaco, monospace;
    font-size: 0.875em;
}
.note-content pre {
    background: var(--color-bg-subtle, #f3f4f6);
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    line-height: 1.5;
}
.note-content pre code { background: transparent; padding: 0; }
.note-content blockquote {
    border-left: 4px solid var(--color-tenant-accent, #2ebfbf);
    padding-left: 1em;
    margin: 1em 0;
    color: var(--color-text-muted, #5e6770);
}
.note-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    margin: 1em 0;
}
.note-content hr {
    border: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    margin: 1.5em 0;
}

/* Mobile fullscreen */
@media (max-width: 640px) {
    dialog.note-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .note-modal__inner { max-height: 100%; }
    .note-modal__body { padding: 1rem; }
}


/* === components/skeleton.css === */
/* ============================================================
   Component : .skeleton (Story 1.6)
   Cohérent UX-DR13 — shimmer 1.4s, neutralisé par prefers-reduced-motion.
   ============================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--c-navy-100) 0%,
        rgba(15, 23, 42, 0.04) 50%,
        var(--c-navy-100) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
}

.skeleton--line {
    height: 12px;
    margin: var(--space-2) 0;
}

.skeleton--line-lg {
    height: 16px;
    margin: var(--space-2) 0;
}

.skeleton--avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
}

.skeleton--card {
    height: 120px;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Reduced motion : statique ────────────────────────── */
/* Note : règle globale dans base.css déjà active, redondance pour clarté. */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none !important;
    }
}


/* === components/team-tab.css === */
/* === Onglet "Mon équipe" (Story 5.2) === */

.team-list { display: flex; flex-direction: column; gap: 0.5rem; }

.team-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.team-row:hover {
    border-color: var(--color-tenant-accent, #2ebfbf);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.team-row__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--color-tenant-primary, #8c78fe);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.875rem;
    flex-shrink: 0;
}

.team-row__info { flex: 1 1 auto; min-width: 0; }
.team-row__name {
    font-weight: 600;
    color: var(--color-text, #1d2c3b);
}
.team-row__email {
    font-size: 0.75rem;
    color: var(--color-text-muted, #5e6770);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    word-break: break-all;
    margin-top: 2px;
}

.team-row__count {
    font-size: 0.875rem;
    color: var(--color-text-muted, #5e6770);
    font-weight: 600;
    flex-shrink: 0;
}

.team-row__actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    flex-shrink: 0;
}

.team-viewer-banner {
    background: #cffafe;
    color: #155e75;
    border-left: 3px solid #06b6d4;
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.team-viewer-banner a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .team-row { flex-wrap: wrap; }
    .team-row__email { display: none; }
    .team-row__actions { width: 100%; margin-top: 0.5rem; }
    .team-row__actions .btn--sm { flex: 1 1 auto; text-align: center; }
}


/* === components/toast.css === */
/* ============================================================
   Component : .toast (Story 1.6)
   Cohérent UX-DR12 — surface blanche + border-left coloré + WCAG AAA.
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast {
    background-color: var(--c-surface);
    color: var(--c-navy-900);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-navy-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: var(--lh-base);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    pointer-events: auto;
    max-width: 380px;
    animation: toast-in 250ms var(--ease-smooth),
               toast-out 250ms var(--ease-smooth) 3.25s forwards;
}

.toast__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ─── Variantes ────────────────────────────────────────── */

.toast--success {
    border-left-color: var(--c-success);
}
.toast--success .toast__icon {
    color: var(--c-success);
}

.toast--error {
    border-left-color: var(--c-error);
}
.toast--error .toast__icon {
    color: var(--c-error);
}

.toast--info {
    border-left-color: var(--c-accent);
}
.toast--info .toast__icon {
    color: var(--c-accent-dark);
}

.toast--warning {
    border-left-color: var(--c-warning);
}
.toast--warning .toast__icon {
    color: var(--c-warning-text);
}

/* ─── Animations ───────────────────────────────────────── */

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}

/* ─── Mobile : pleine largeur en bas ────────────────────── */

@media (max-width: 639px) {
    .toast-container {
        bottom: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
    }
    .toast {
        max-width: none;
    }
}


/* === pages/dashboard.css === */
/* === Dashboard salarié (Story 3.2) — aligné mockup screen 3 === */

body.dashboard-page {
    background: linear-gradient(180deg,
        var(--color-tenant-bg) 0%,
        #FFFFFF 400px);
    color: var(--color-text, #1d2c3b);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
}

/* ─── Nav client — aligné mockup screen 3 (glassmorphism + sticky) ─── */
.nav-client {
    background: rgba(255, 255, 255, 0.90);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.nav-client__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.nav-client__logo-area {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    min-height: 40px;
}
.nav-client__logo {
    height: 28px;
    max-width: 180px;
    object-fit: contain;
}
.nav-client__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}
.nav-client__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.nav-client__user-name {
    font-weight: 500;
    color: var(--color-text);
}
.nav-client__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-tenant-accent-subtle, var(--color-tenant-primary-subtle, var(--color-accent-subtle)));
    color: var(--color-tenant-primary, var(--color-tenant-primary-dark, var(--color-accent-dark)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.nav-client__logout {
    color: var(--color-text-subtle);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-base) var(--ease-smooth);
}
.nav-client__logout:hover,
.nav-client__logout:focus-visible {
    color: var(--color-danger);
    outline: none;
}

/* Tabs intégrés au header — sur la MÊME ligne entre logo et user
   (pattern GitHub-style). */
.nav-client__tabs-wrap {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}
.nav-client .dashboard-tabs {
    margin: 0;
    border-bottom: none;
}
.nav-client .dashboard-tabs__btn {
    margin-bottom: 0;
}

/* ─── Main ─── */
.client-main {
    flex: 1 1 auto;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
}

.greeting { margin-bottom: 1.5rem; }
.greeting__hello {
    font-size: 1rem;
    color: var(--color-text-muted, #5e6770);
    margin-bottom: 0.25rem;
}
.greeting__name {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-text, #1D2C3B);
    line-height: 1.2;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text, #1D2C3B);
    margin: 1.5rem 0 1rem;
    letter-spacing: -0.01em;
}

.section-title--sub {
    font-size: 1rem;
    margin-top: 2rem;
}

.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 1rem;
}

.section-title-row .section-title {
    margin: 0;
}

.section-hint {
    color: #6b7280;
    font-size: 0.875rem;
    margin: -0.5rem 0 0.75rem;
}

/* ─── Empty state ─── */
.empty-state {
    background: #fff;
    border: 1px dashed var(--color-border, #d0d6dd);
    border-radius: 0.75rem;
    padding: 2.5rem 2rem;
    text-align: center;
}
.empty-state__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text, #1D2C3B);
}
.empty-state__hint {
    color: var(--color-text-muted, #5e6770);
    margin: 0;
    font-size: 0.9375rem;
}

/* ─── Folder list ─── */
.folder-list { display: flex; flex-direction: column; gap: 0; }

.folder-card-wrap { margin-bottom: 0.75rem; }

.folder-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: all var(--duration-base) var(--ease-smooth);
    list-style: none;
}
.folder-card::-webkit-details-marker { display: none; }

.folder-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
}

.folder-card-wrap[open] > .folder-card {
    border-color: var(--color-tenant-primary, var(--color-accent));
    background: var(--color-tenant-accent-subtle, var(--color-tenant-primary-subtle, var(--color-accent-subtle)));
}

.folder-card--bsi {
    border-color: var(--color-accent);
    border-width: 2px;
}

.folder-card--hidden {
    opacity: 0.85;
    border-style: dashed;
}

.folder-card--sub {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.folder-card--file {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    cursor: default;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}
.folder-card--file:hover {
    transform: none;
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.folder-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-tenant-accent-subtle, var(--color-tenant-primary-subtle, var(--color-accent-subtle)));
    color: var(--color-tenant-primary, var(--color-tenant-primary-dark, var(--color-accent-dark)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.folder-card--sub .folder-card__icon,
.folder-card--file .folder-card__icon {
    width: 36px;
    height: 36px;
}

/* ─── Badge extension fichier (mockup screen-manager) ─────────
   Bloc rectangulaire coloré par type, 32px de large. Remplace
   l'icône générique pour les fichiers (pas les dossiers). ─── */
.file-ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    border-radius: 4px;
    color: #fff;
    font-weight: 700;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: var(--font-display);
}
.file-ext--pdf     { background: linear-gradient(180deg, #F0474B, #E5252A); }
.file-ext--word    { background: linear-gradient(180deg, #3A6FB5, #2B579A); }
.file-ext--excel   { background: linear-gradient(180deg, #2A8C5A, #217346); }
.file-ext--ppt     { background: linear-gradient(180deg, #DB5232, #C43E1C); }
.file-ext--image   { background: linear-gradient(180deg, #9D6FE0, #8C5BD8); }
.file-ext--video   { background: linear-gradient(180deg, #635BF0, #4F46E5); }
.file-ext--audio   { background: linear-gradient(180deg, #E63E8C, #DB2777); }
.file-ext--archive { background: linear-gradient(180deg, #C9690F, #B45309); }
.file-ext--text    { background: linear-gradient(180deg, #5A6A7F, #475569); }
.file-ext--default { background: linear-gradient(180deg, #7A8699, #64748B); }

/* Pictos image (note Post-it / lien WWW) — assets SVG dédiés */
.folder-card__icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}

.folder-card__info {
    flex: 1 1 auto;
    min-width: 0;
}

.folder-card__name {
    font-weight: 600;
    color: var(--color-text, #1D2C3B);
    margin-bottom: 2px;
    word-break: break-word;
}

.folder-card__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #5e6770);
}

.folder-card__chevron {
    color: var(--color-text-subtle);
    transition: transform var(--duration-base) var(--ease-smooth);
    flex-shrink: 0;
}

.folder-card-wrap[open] > .folder-card .folder-card__chevron {
    transform: rotate(90deg);
}

.folder-card-children {
    padding-left: var(--space-8);
    margin-top: calc(-1 * var(--space-2));
    margin-left: var(--space-5);
    border-left: 2px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}
.folder-card-children > .folder-card-wrap,
.folder-card-children > .folder-card {
    margin-bottom: var(--space-2);
}
.folder-card-children > :last-child { margin-bottom: 0; }

.folder-card__empty {
    color: var(--color-text-muted, #5e6770);
    font-style: italic;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.folder-card__bsi-nav {
    margin: var(--space-2) 0;
}
.folder-card__bsi-nav a {
    color: var(--color-accent-dark);
    text-decoration: none;
    font-weight: 600;
}
.folder-card__bsi-nav a:hover { text-decoration: underline; }

/* ─── Badges ─── */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    background: var(--color-bg-subtle, #f3f4f6);
    color: var(--color-text-muted, #5e6770);
    vertical-align: middle;
}
.badge--collectif {
    background: color-mix(in srgb, var(--color-tenant-primary, #8c78fe) 15%, white);
    color: var(--color-tenant-primary, #8c78fe);
}
.badge--personal {
    background: color-mix(in srgb, var(--color-tenant-accent, #2ebfbf) 15%, white);
    color: var(--color-tenant-accent, #2ebfbf);
}
.badge--note {
    background: #fff4d6;
    color: #5b3d00;
}
.folder-card--note .folder-card__icon {
    background: #fff4d6;
    color: #5b3d00;
}
.badge--lien {
    background: color-mix(in srgb, var(--color-tenant-primary, #8c78fe) 12%, white);
    color: var(--color-tenant-primary, #8c78fe);
}
.folder-card--lien .folder-card__icon {
    background: color-mix(in srgb, var(--color-tenant-primary, #8c78fe) 12%, white);
    color: var(--color-tenant-primary, #8c78fe);
}
.badge--hidden {
    background: #fff4d6;
    color: #5b3d00;
}
.badge--compliance {
    background: var(--color-bg-subtle, #f3f4f6);
    color: var(--color-text-muted, #5e6770);
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    margin-left: 0;
}

/* ─── Boutons mini : supprimés (Phase 2 refactor)
   Remplacés par .btn .btn--primary .btn--sm et .btn .btn--secondary .btn--sm
   (cf. components/btn.css — source maquette). ─── */

/* ─── Footer OXIL ─── */
.footer-oxil-sig {
    margin-top: 4rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--color-border, #e5e7eb);
    text-align: center;
}
.footer-oxil-sig__line {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #5e6770);
    margin-bottom: 0.75rem;
}
.footer-oxil-sig__brand {
    color: var(--color-tenant-primary, #8c78fe);
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.25rem;
}
.footer-oxil-sig__badges {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .nav-client__inner {
        flex-direction: row;
        gap: 0.5rem;
    }
    .nav-client__user-name { display: none; }
    .client-main { padding: 1.25rem 1rem; }
    .greeting__name { font-size: 1.5rem; }
    .folder-card { padding: 0.75rem 0.875rem; }
    .folder-card--file { flex-direction: column; align-items: flex-start; }
    .folder-card--file .btn--sm { width: 100%; justify-content: center; }
    .folder-card-children { padding-left: 1rem; margin-left: 0.5rem; }
}


/* === pages/error.css === */
/* ============================================================
   Oxil Share — Pages d'erreur HTTP brandées (Story 2.2 AC12)

   Aligné maquette `screen-states` :
   .error-page (body) · .error-page__card · .error-page__code
   .error-page__title · .error-page__desc · .error-page__actions
   ============================================================ */

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: var(--space-8) var(--space-4);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-family: var(--font-display);
    line-height: 1.5;
}

.error-page__card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-10) var(--space-8);
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.error-page__code {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}

/* Variante gradient (mockup l.2037 — pour SSO échec / 503 stylisé ⛔) */
.error-page__code.gradient {
    background: var(--gradient-signature);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.error-page__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--color-navy-800);
}

.error-page__desc {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
    font-size: 0.9375rem;
}

.error-page__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    .error-page { padding: var(--space-4); }
    .error-page__card { padding: var(--space-8) var(--space-5); }
    .error-page__code { font-size: 2.75rem; }
}


/* === pages/landing.css === */
/* ============================================================
   Page : Landing publique OXIL  (Story 1.7)

   Source canonique : ux-design-final-mockup.html, section 7
   (lignes 450-633). Tout style ici doit refléter le mockup.
   ============================================================ */

/* ─── Nav publique sticky ─────────────────────────────────── */

.oxil-nav-public {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.oxil-nav-public .nav-links {
    margin-left: auto;
    display: flex;
    gap: var(--space-6);
    align-items: center;
}

.oxil-nav-public .nav-links a {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.oxil-nav-public .nav-links a:hover {
    color: var(--color-navy-800);
    text-decoration: none;
}

/* Logo client (mockup section 1) — supporte texte ou <img>. */
.client-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-decoration: none;
    font-size: 1.25rem;
    color: var(--color-navy-800);
}

/* Variante texte gradient (logo OXIL stylisé en dégradé signature) */
.client-logo--oxil {
    background: var(--gradient-signature);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Logos PNG/SVG dans `.client-logo` (variantes de taille mockup) */
.client-logo img {
    display: block;
    height: 32px;
    width: auto;
    object-fit: contain;
}
.client-logo.sm img { height: 22px; }
.client-logo.md img { height: 28px; }
.client-logo.lg img { height: 56px; }

/* ─── Burger nav (mobile) ─────────────────────────────────── */

.nav-burger {
    margin-left: auto;
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-navy-800);
    transition: background var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth);
}

.nav-burger:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}

.nav-burger__lines {
    position: relative;
    width: 18px;
    height: 12px;
    color: currentColor;
}

.nav-burger__lines::before,
.nav-burger__lines::after,
.nav-burger__lines span {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--duration-base) var(--ease-smooth),
                opacity var(--duration-base) var(--ease-smooth),
                top var(--duration-base) var(--ease-smooth);
}

.nav-burger__lines::before { top: 0; }
.nav-burger__lines span    { top: 5px; display: block; }
.nav-burger__lines::after  { top: 10px; }

/* État ouvert : 3 traits → X */
.nav-burger[aria-expanded="true"] .nav-burger__lines::before {
    top: 5px;
    transform: rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger__lines span {
    opacity: 0;
}
.nav-burger[aria-expanded="true"] .nav-burger__lines::after {
    top: 5px;
    transform: rotate(-45deg);
}

/* ─── HERO ────────────────────────────────────────────────── */

.landing-hero {
    position: relative;
    padding: var(--space-24) var(--space-8);
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%);
}

.landing-hero::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(140, 120, 254, 0.14), transparent 70%);
    pointer-events: none;
}

.landing-hero::after {
    content: '';
    position: absolute;
    top: 30%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(46, 191, 191, 0.10), transparent 70%);
    pointer-events: none;
}

.landing-hero__content {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

.landing-hero__eyebrow {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(140, 120, 254, 0.08);
    color: #5a4ed6;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-6);
}

.landing-hero__title {
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--color-navy-800);
    margin-bottom: var(--space-6);
}

.landing-hero__title .gradient {
    background: var(--gradient-signature);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-hero__desc {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: var(--space-10);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.landing-hero__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.landing-hero__trust {
    margin-top: var(--space-10);
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--color-text-subtle);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ─── FEATURES ────────────────────────────────────────────── */

.landing-intro {
    padding: var(--space-24) var(--space-8);
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.landing-intro__title {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    margin-bottom: var(--space-6);
}

.landing-intro__lead {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: var(--space-4);
}

.landing-intro__lead strong {
    color: var(--color-navy-800);
    font-weight: 600;
}

.landing-features {
    padding: var(--space-24) var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
}

.landing-features__title {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    margin-bottom: var(--space-4);
}

.landing-features__subtitle {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    margin-bottom: var(--space-16);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.feature-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: transform var(--duration-base) var(--ease-smooth),
                box-shadow var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth);
}

.feature-card:hover {
    border-color: rgba(140, 120, 254, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.feature-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--gradient-signature);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: var(--space-5);
}

.feature-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-navy-800);
    margin-bottom: var(--space-2);
}

.feature-card__desc {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ─── CTA bandeau navy ────────────────────────────────────── */

.landing-cta {
    padding: var(--space-16) var(--space-8);
    background: var(--color-navy-800);
    color: white;
    text-align: center;
}

.landing-cta__inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.landing-cta h3 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.landing-cta p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
    font-size: 1.125rem;
}

/* ─── Footer ──────────────────────────────────────────────── */

.landing-footer {
    padding: var(--space-10) var(--space-8);
    background: var(--color-navy-800);
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.875rem;
}

.landing-footer a {
    color: inherit;
    text-decoration: none;
}

.landing-footer a:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.landing-footer__links {
    display: flex;
    gap: var(--space-4);
}

/* ============================================================
   Responsive — passe mobile (< 640px)
   Source : mockup "Polish responsive : passe 2" (lignes 3147-3193).
   ============================================================ */

@media (max-width: 639px) {
    .nav-burger {
        display: inline-flex;
    }

    .oxil-nav-public {
        flex-wrap: wrap;
        position: sticky;
        padding: var(--space-3) var(--space-4);
    }

    .oxil-nav-public .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        padding: var(--space-2) var(--space-4) var(--space-4);
        background: white;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--duration-base) var(--ease-smooth),
                    opacity var(--duration-base) var(--ease-smooth);
    }

    .oxil-nav-public.is-open .nav-links {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .oxil-nav-public .nav-links a {
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--color-border);
        font-size: 1rem;
        color: var(--color-navy-800);
    }

    .oxil-nav-public .nav-links a:last-of-type {
        border-bottom: 0;
    }

    .oxil-nav-public .nav-links .btn {
        margin-top: var(--space-3);
        width: 100%;
        justify-content: center;
    }

    .landing-hero {
        padding: var(--space-16) var(--space-5);
    }

    .landing-hero__title {
        font-size: 2.25rem;
    }

    .landing-features {
        padding: var(--space-16) var(--space-5);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .landing-footer {
        flex-direction: column;
        text-align: center;
    }

    .landing-footer__links {
        justify-content: center;
    }
}

/* Tablet — features en 2 colonnes */
@media (min-width: 640px) and (max-width: 1023px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* === pages/login.css === */
/* ============================================================
   Oxil Share — Page login (Story 2.2 → refonte mockup screen-login)

   Canonique : ux-design-final-mockup.html section 8 (`.login-screen`,
   `.login-card`, `.otp-inputs`, `.login-card__footer/oxil`).

   Composants génériques `.input-group/.input-label/.input-field` :
   définis dans components/form.css (NE PAS redéfinir ici).

   Legacy conservé en bas (`.login-form*`, `.login-otp-grid`,
   `.login-or-divider`, `.login-flash`) tant que les écrans secondaires
   auth (set-password, sso-error…) ne sont pas migrés.
   ============================================================ */

/* ─── Wrapper plein écran : dégradé tenant (mockup) ───────── */
.login-screen {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-bg-client-1) 0%, var(--color-bg-client-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
}

/* Sélecteur de langue en haut à droite, sur fond translucide pour lisibilité. */
.login-screen__lang {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 10;
    padding: var(--space-1);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
}
.login-screen::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 80%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%);
    pointer-events: none; /* halo décoratif — ne doit pas intercepter les clics */
}
.login-screen::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -20%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
    pointer-events: none; /* idem — bloquait la moitié droite des inputs/btn */
}

/* ─── Legacy : fond neutre pour écrans auth non encore migrés ─ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--color-bg-subtle);
}

/* ─── Carte login (mockup spec) ───────────────────────────── */
.login-card {
    position: relative;
    width: 440px;
    max-width: 100%;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.login-card__logo-area {
    text-align: center;
    margin-bottom: var(--space-8);
    padding: var(--space-5) var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.login-card__logo {
    max-height: 56px;
    max-width: 200px;
    width: auto;
    height: auto;
}

.login-card__title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-navy-800);
    margin: 0 0 var(--space-2);
    text-align: center;
}

.login-card__subtitle {
    color: var(--color-text-muted);
    margin: 0 0 var(--space-8);
    font-size: 0.9375rem;
    text-align: center;
}

/* ─── OTP inputs (mockup) ─────────────────────────────────── */
.otp-inputs {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.otp-input {
    width: 48px;
    height: 56px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-navy-800);
    font-family: var(--font-mono);
}
.otp-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-focus);
}
.otp-input.filled {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

@media (max-width: 640px) {
    .otp-input { width: 40px; height: 48px; font-size: 1.25rem; }
}

/* ─── Footer compliance + signature OXIL (mockup) ─────────── */
.login-card__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}
.login-card__footer a {
    color: inherit;
    text-decoration: none;
}
.login-card__footer a:hover { text-decoration: underline; }

.login-card__oxil {
    text-align: center;
    margin-top: var(--space-3);
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
}
.login-card__oxil img {
    height: 18px;
    width: auto;
}

/* ─── Critères mot de passe (mockup screen-auth-profil) ───── */
.password-criteria {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}
.password-criteria__title {
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.password-criteria__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.password-criteria__item.ok { color: var(--color-success-text); }
.password-criteria__icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--color-border);
    color: var(--color-text-subtle);
    flex-shrink: 0;
}
.password-criteria__item.ok .password-criteria__icon {
    background: var(--color-success-subtle);
    color: var(--color-success-text);
}

/* ─── Liens secondaires (première visite / mdp oublié) ─────── */
.login-card__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    text-align: center;
}

/* Flash message (info / erreur générique) */
.login-flash {
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-info-subtle);
    color: var(--color-info-text);
    border: 1px solid var(--color-info);
    font-size: 0.875rem;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .login-screen { padding: var(--space-4); }
    .login-card { padding: var(--space-6) var(--space-5); }
    .login-card__logo { max-height: 48px; }
}

/* ════════════════════════════════════════════════════════════
   LEGACY — conservé pour écrans auth secondaires non migrés
   (account-request-link, account-set-password, link-expired,
   sso-error). À supprimer une fois ces écrans migrés (A.5).
   ════════════════════════════════════════════════════════════ */

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.login-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.login-form__label { font-size: 0.875rem; font-weight: 500; color: var(--color-text); }
.login-form__input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-form__input:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-focus);
}
.login-form__submit {
    margin-top: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.login-form__submit:hover { filter: brightness(0.92); }
.login-form__submit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.login-form__submit--secondary {
    background: transparent;
    color: var(--color-accent-dark);
    border: 1px solid var(--color-accent);
}
.login-form__submit--secondary:hover {
    background: var(--color-accent-subtle);
    filter: none;
}
.login-form__links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    text-align: center;
}
.login-form__link {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s ease;
}
.login-form__link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}
.login-or-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--color-text-subtle);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.login-or-divider::before,
.login-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.login-otp-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    max-width: 320px;
    margin: 0 auto;
}
.login-otp-input {
    width: 100%;
    aspect-ratio: 1 / 1.2;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}
@media (max-width: 640px) {
    .login-otp-input { width: 40px; height: 48px; }
}