/* =============================================================================
   LEVEL UP Business Club — Styles globaux
   -----------------------------------------------------------------------------
   Charte graphique v1.0. Trois règles qui gouvernent tout ce fichier :

     1. Fond sombre par défaut — le noir est la scène, l'or et le cyan sont les
        seuls acteurs éclairés. Aucune version claire en v1.
     2. Une seule zone brillante par écran — lueurs et dégradés dorés sont
        réservés à l'élément le plus important de la page.
     3. L'or récompense, le cyan informe — l'or marque le statut et l'action
        principale, le cyan porte la donnée, la progression et les liens.

   Les variables viennent de design_tokens.css. Aucune couleur en dur ici.
   ============================================================================= */

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-16);
    line-height: var(--lu-interligne-texte);
    color: var(--lu-gris-clair);
    background: var(--lu-noir);
    background-image: var(--lu-degrade-fond);
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

/* L'attribut hidden gagne toujours : sans ça, une règle de composant
   (.bloc img { display: block }) réaffiche un élément masqué. */
[hidden] { display: none !important; }

a {
    color: var(--lu-cyan);
    text-decoration: none;
    transition: color var(--lu-transition);
}
a:hover { color: var(--lu-or); }

/* Focus visible partout : anneau or clair décalé du fond (charte § Accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--lu-focus);
    border-radius: var(--lu-rayon-net);
}

::selection { background: rgba(240, 182, 43, 0.28); color: var(--lu-blanc); }

/* Barres de défilement accordées au thème sombre */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--lu-filet) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--lu-filet);
    border-radius: var(--lu-rayon-pilule);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--lu-filet-fort); background-clip: content-box; }

/* =============================================
   TYPOGRAPHIE
   Archivo Black pour les titres et les chiffres de score, Inter pour le reste.
   Pas de majuscules forcées : la masse d'Archivo Black suffit.
   ============================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--lu-police-titre);
    font-weight: 400;
    color: var(--lu-blanc);
    letter-spacing: var(--lu-approche-titre);
    line-height: var(--lu-interligne-titre);
}

h1 { font-size: var(--lu-t-33); line-height: var(--lu-interligne-serre); }
h2 { font-size: var(--lu-t-26); }
h3 { font-size: var(--lu-t-21); }
h4 { font-size: var(--lu-t-18); }

/* Sous-titres et libellés forts : Inter 600, plus lisible qu'un display */
h5, h6 {
    font-family: var(--lu-police-texte);
    font-weight: 600;
    font-size: var(--lu-t-16);
}

p { max-width: var(--lu-largeur-texte); }
strong, b { color: var(--lu-blanc); font-weight: 600; }
small { font-size: var(--lu-t-12); }

code, pre, .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}
code { color: var(--lu-or); }

/* Titre de section discret (au-dessus des blocs) */
.section-title {
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lu-gris);
    font-weight: 600;
    margin: 0 0 var(--lu-e-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-2);
}

/* Chiffres : toujours alignés (classements, XP, montants) */
.tabular, .data-table .col-right, .lu-stat { font-variant-numeric: tabular-nums; }

/* =============================================
   LOGO
   ============================================= */
.lu-logo { display: block; height: auto; }
.lu-logo-compact { width: 156px; }
.lu-logo-full { width: 100%; max-width: 420px; }

/* Lockup complet dans le menu : dimensionné par la hauteur, jamais recomposé
   (charte § Usage du logo — ne pas séparer titre, signature et barre XP). */
.lu-logo-menu {
    height: 56px;
    width: auto;
    max-width: none;
}

/* =============================================
   BOUTONS
   Un seul bouton doré par écran : c'est l'action que le club veut voir
   accomplie. Fantôme pour le secondaire, texte cyan pour la navigation.
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lu-e-2);
    font-family: var(--lu-police-texte);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--lu-rayon-pilule);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--lu-transition);
}
.btn i { font-size: 0.875em; }
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Primaire : dégradé or, texte brun foncé (contraste AAA) --- */
.btn-primary {
    background: var(--lu-degrade-or);
    color: var(--lu-sur-or);
    box-shadow: var(--lu-lueur-or);
}
.btn-primary:hover { filter: brightness(1.08); color: var(--lu-sur-or); }
.btn-primary:active { filter: brightness(0.94); }

/* --- Secondaire : fantôme doré --- */
.btn-secondary {
    background: transparent;
    color: var(--lu-or);
    border-color: var(--lu-or-profond);
}
.btn-secondary:hover {
    background: rgba(240, 182, 43, 0.08);
    border-color: var(--lu-or);
    color: var(--lu-or-clair);
}

/* --- Neutre : fantôme gris, pour les actions sans enjeu --- */
.btn-outline {
    background: transparent;
    color: var(--lu-gris-clair);
    border-color: var(--lu-filet);
}
.btn-outline:hover {
    background: var(--lu-surface-haute);
    border-color: var(--lu-gris);
    color: var(--lu-blanc);
}

/* --- Texte cyan : action de navigation --- */
.btn-text {
    background: none;
    border: none;
    color: var(--lu-cyan);
    padding: 12px 4px;
}
.btn-text:hover { color: var(--lu-or); }

/* --- États --- */
.btn-success {
    background: transparent;
    color: var(--lu-succes);
    border-color: rgba(34, 197, 139, 0.5);
}
.btn-success:hover { background: var(--lu-succes-fond); border-color: var(--lu-succes); }

.btn-danger {
    background: transparent;
    color: var(--lu-erreur);
    border-color: rgba(226, 72, 63, 0.5);
}
.btn-danger:hover { background: var(--lu-erreur-fond); border-color: var(--lu-erreur); }

/* --- Tailles --- */
.btn-sm { padding: 8px 16px; font-size: var(--lu-t-14); }
.btn-lg { padding: 15px 30px; font-size: var(--lu-t-18); }
.btn-full { width: 100%; }

/* --- Variantes dégradé (réserver aux CTA thématiques, une par écran) --- */
.btn-gradient-or,
.btn-gradient-cyan,
.btn-gradient-bleu,
.btn-gradient-vert,
.btn-gradient-rouge {
    border: none;
    color: var(--lu-blanc);
    box-shadow: var(--lu-ombre-1);
}
.btn-gradient-or    { background: var(--lu-degrade-or); color: var(--lu-sur-or); box-shadow: var(--lu-lueur-or); }
.btn-gradient-cyan  { background: var(--gradient-cyan); }
.btn-gradient-bleu  { background: var(--gradient-bleu); }
.btn-gradient-vert  { background: var(--gradient-vert); }
.btn-gradient-rouge { background: var(--gradient-rouge); }
.btn-gradient-or:hover,
.btn-gradient-cyan:hover,
.btn-gradient-bleu:hover,
.btn-gradient-vert:hover,
.btn-gradient-rouge:hover { filter: brightness(1.1); }

/* --- Bouton icône carré (angles nets) --- */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--lu-transition);
}
.btn-icon-only:hover { border-color: var(--lu-cyan); color: var(--lu-cyan); }
.btn-icon-only.danger:hover { border-color: var(--lu-erreur); color: var(--lu-erreur); background: var(--lu-erreur-fond); }

/* --- Bouton icône rond : actions inline dans les tableaux --- */
.btn-icon-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    color: var(--lu-gris-clair);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: var(--lu-transition);
}
.btn-icon-round:hover {
    border-color: var(--lu-cyan);
    color: var(--lu-cyan);
    background: var(--lu-surface-haute);
}
.btn-icon-round:active { transform: scale(0.94); }
.btn-icon-round.info:hover    { border-color: var(--lu-cyan);   color: var(--lu-cyan);   background: var(--lu-info-fond); }
.btn-icon-round.success       { color: var(--lu-succes); }
.btn-icon-round.success:hover { border-color: var(--lu-succes); color: var(--lu-succes); background: var(--lu-succes-fond); }
.btn-icon-round.warning       { color: var(--lu-or); }
.btn-icon-round.warning:hover { border-color: var(--lu-or);     color: var(--lu-or);     background: var(--lu-alerte-fond); }
.btn-icon-round.danger        { color: var(--lu-erreur); }
.btn-icon-round.danger:hover  { border-color: var(--lu-erreur); color: var(--lu-erreur); background: var(--lu-erreur-fond); }

/* --- Action rapide inline (angles nets, comme les champs) --- */
.btn-action-quick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    padding: 5px 10px;
    font-family: var(--lu-police-texte);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lu-gris-clair);
    cursor: pointer;
    transition: var(--lu-transition);
}
.btn-action-quick:hover { border-color: var(--lu-cyan); color: var(--lu-cyan); }
.btn-action-quick:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-action-quick i { font-size: 0.75rem; }

/* Formulaires inline : neutraliser la marge des <form> autour des boutons */
form.inline-form { display: inline; }

/* =============================================
   TOP BAR
   Barre fixe, surface haute, filet doré discret en bas.
   ============================================= */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--lu-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-4);
    padding: 0 var(--lu-e-6);
    background: rgba(11, 15, 21, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lu-or-brun);
    box-shadow: var(--lu-ombre-1);
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    min-width: 0;
}
.top-bar-right { gap: var(--lu-e-2); }

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    background: transparent;
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--lu-transition);
}
.sidebar-toggle:hover { border-color: var(--lu-or-profond); color: var(--lu-or); }

.top-bar-logo {
    display: flex;
    align-items: center;
    flex: none;
    padding: 0 var(--lu-e-3);
    border-radius: var(--lu-rayon-net);
}
.top-bar-logo:hover { filter: brightness(1.06); }

.top-bar-info {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    min-width: 0;
    padding-left: var(--lu-e-3);
    border-left: 1px solid var(--lu-filet);
}

.user-greeting {
    display: inline-flex;
    align-items: center;
    gap: var(--lu-e-2);
    font-size: var(--lu-t-14);
    color: var(--lu-gris-clair);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-greeting i { color: var(--lu-gris); }

/* Boutons de raccourci d'espace */
.btn-topbar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lu-e-2);
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--lu-transition);
}
.btn-topbar:hover {
    border-color: var(--lu-cyan);
    color: var(--lu-cyan);
    background: var(--lu-surface-haute);
}
.btn-topbar.active { border-color: var(--lu-or-profond); color: var(--lu-or); }
.btn-topbar .btn-text { padding: 0; font-size: var(--lu-t-14); color: inherit; }
.btn-topbar-settings:hover { border-color: var(--lu-or-profond); color: var(--lu-or); }

/* Avatar */
.top-bar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lu-champ);
    border: 1px solid var(--lu-or-profond);
    color: var(--lu-or);
    font-size: 1.25rem;
    transition: var(--lu-transition);
}
.top-bar-avatar:hover { border-color: var(--lu-or); box-shadow: var(--lu-lueur-or); }
.top-bar-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Infobulles de la top bar */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    padding: 5px 9px;
    background: var(--lu-surface-haute);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: var(--lu-transition);
    box-shadow: var(--lu-ombre-2);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateY(0); }

/* =============================================
   SIDEBAR
   ============================================= */
.sidebar {
    position: fixed;
    top: var(--lu-topbar-h);
    left: 0;
    bottom: 0;
    z-index: 150;
    width: var(--lu-sidebar-w);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--lu-surface);
    border-right: 1px solid var(--lu-filet);
    overflow-x: hidden;
    overflow-y: auto;
    transition: width var(--lu-transition), transform var(--lu-transition);
}

.sidebar-content { padding: var(--lu-e-4) var(--lu-e-3); }

.sidebar-header { padding: 0 var(--lu-e-2) var(--lu-e-3); }
.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    font-family: var(--lu-police-texte);
    font-weight: 600;
    font-size: var(--lu-t-12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lu-gris);
}
.sidebar-section-title i { color: var(--lu-or); font-size: 0.85rem; }

.sidebar-section-group + .sidebar-section-group { margin-top: var(--lu-e-4); }
.sidebar-section-subtitle {
    padding: 0 var(--lu-e-2) var(--lu-e-2);
    font-size: var(--lu-t-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lu-gris);
    opacity: 0.75;
}

.sidebar-menu { list-style: none; }
.sidebar-menu li + li { margin-top: 2px; }

.sidebar-menu a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: 10px var(--lu-e-3);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--lu-transition);
}
.sidebar-menu a i {
    width: 18px;
    flex: none;
    text-align: center;
    font-size: 0.95rem;
}
.sidebar-menu a:hover {
    background: var(--lu-surface-haute);
    color: var(--lu-blanc);
}

/* Entrée active : filet doré + texte or (l'or marque le statut) */
.sidebar-menu a.active {
    background: linear-gradient(90deg, rgba(240, 182, 43, 0.12), transparent 70%);
    color: var(--lu-or);
    font-weight: 600;
}
.sidebar-menu a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--lu-degrade-or);
    border-radius: var(--lu-rayon-pilule);
}
.sidebar-menu a.active i { color: var(--lu-or) !important; }

.sidebar-empty {
    padding: var(--lu-e-8) var(--lu-e-4);
    text-align: center;
    color: var(--lu-gris);
    font-size: var(--lu-t-14);
}
.sidebar-empty i { display: block; font-size: 1.6rem; color: var(--lu-or-profond); margin-bottom: var(--lu-e-2); }

.sidebar-footer {
    padding: var(--lu-e-3) var(--lu-e-4);
    border-top: 1px solid var(--lu-filet);
}
.sidebar-footer a {
    display: block;
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    text-align: center;
    white-space: nowrap;
}
.sidebar-footer a:hover { color: var(--lu-or); }

/* --- Sidebar réduite (desktop) --- */
.sidebar.collapsed { width: var(--lu-sidebar-w-reduite); }
.sidebar.collapsed .sidebar-menu a { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sidebar-menu a span,
.sidebar.collapsed .sidebar-section-title span,
.sidebar.collapsed .sidebar-section-subtitle,
.sidebar.collapsed .sidebar-empty p,
.sidebar.collapsed .powered-text { display: none; }
.sidebar.collapsed .sidebar-header { display: flex; justify-content: center; }
.sidebar.collapsed .powered-icon { display: block !important; text-align: center; }

/* --- Sous-menus repliables --- */
.sidebar-submenu { margin-top: 2px; }
.sidebar-submenu-toggle {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    width: 100%;
    padding: 10px var(--lu-e-3);
    background: none;
    border: none;
    border-radius: var(--lu-rayon-net);
    color: var(--lu-gris-clair);
    font-family: var(--lu-police-texte);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--lu-transition);
}
.sidebar-submenu-toggle:hover { background: var(--lu-surface-haute); color: var(--lu-blanc); }
.sidebar-submenu-toggle .chevron { margin-left: auto; font-size: 0.7rem; transition: var(--lu-transition); }
.sidebar-submenu.open .sidebar-submenu-toggle .chevron { transform: rotate(90deg); }
.sidebar-submenu-items { display: none; padding-left: var(--lu-e-4); }
.sidebar-submenu.open .sidebar-submenu-items { display: block; }

/* --- Voile mobile --- */
.sidebar-overlay {
    position: fixed;
    inset: var(--lu-topbar-h) 0 0 0;
    z-index: 140;
    background: rgba(4, 6, 10, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--lu-transition);
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

/* =============================================
   CONTENU PRINCIPAL
   ============================================= */
.main-content {
    display: block;
    margin-left: var(--lu-sidebar-w);
    padding: var(--lu-e-8) var(--lu-e-6) var(--lu-e-16);
    transition: margin-left var(--lu-transition);
}
body.sidebar-collapsed .main-content { margin-left: var(--lu-sidebar-w-reduite); }
body.no-sidebar .main-content { margin-left: 0; }

.main-content > * { max-width: var(--lu-contenu-max); }

/* =============================================
   EN-TÊTE DE PAGE
   ============================================= */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--lu-e-4);
    margin-bottom: var(--lu-e-8);
    padding-bottom: var(--lu-e-4);
    border-bottom: 1px solid var(--lu-filet);
}
.page-header h1 { font-size: var(--lu-t-33); }
.page-header h1 i { color: var(--lu-or); margin-right: var(--lu-e-2); }
.page-header-actions { display: flex; align-items: center; gap: var(--lu-e-3); flex-wrap: wrap; }
.page-header-sub {
    flex-basis: 100%;
    margin: calc(-1 * var(--lu-e-2)) 0 0;
    color: var(--lu-gris);
    font-size: var(--lu-t-14);
}

/* =============================================
   CARTES
   ============================================= */
.card {
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    margin-bottom: var(--lu-e-6);
}
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-3);
    padding: var(--lu-e-4) var(--lu-e-6);
    border-bottom: 1px solid var(--lu-filet);
}
.card-header h2, .card-header h3 { font-size: var(--lu-t-21); margin: 0; }
.card-header h2 i, .card-header h3 i { color: var(--lu-or); margin-right: var(--lu-e-2); }
.card-body { padding: var(--lu-e-6); }
.card > .card-body:first-child:last-child { padding: var(--lu-e-6); }

/* Carte de premier plan : filet brun doré + encoche diagonale.
   Une seule par écran (charte § Géométrie). */
.card-primaire {
    border-color: var(--lu-or-brun);
    background: linear-gradient(180deg, var(--lu-surface-relief), var(--lu-surface));
    clip-path: polygon(0 0, calc(100% - var(--lu-encoche)) 0, 100% var(--lu-encoche), 100% 100%, 0 100%);
}

/* =============================================
   FORMULAIRES
   Champs à angles nets (2px) : ils s'opposent aux pilules dorées et se lisent
   immédiatement comme des zones à remplir. Focus cyan, jamais doré.
   ============================================= */
.form-group { margin-bottom: var(--lu-e-4); }

.form-group label,
label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-14);
    font-weight: 500;
    color: var(--lu-gris-clair);
}
.form-group label i { color: var(--lu-gris); margin-right: 6px; }
.form-group label .required,
.required { color: var(--lu-erreur); }

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="month"], input[type="week"], input[type="search"],
select, textarea {
    display: block;
    width: 100%;
    padding: 11px 13px;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-blanc);
    font-family: var(--lu-police-texte);
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: var(--lu-transition);
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--lu-placeholder); }

.form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--lu-cyan);
    box-shadow: 0 0 0 3px rgba(0, 168, 240, 0.18);
}
.form-control:disabled,
input:disabled, select:disabled, textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--lu-champ-inactif);
}
.form-control.is-invalid, .form-control[aria-invalid="true"] { border-color: var(--lu-erreur); }

textarea.form-control { min-height: 92px; resize: vertical; }

select, select.form-control {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A93A3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 11px;
    cursor: pointer;
}
select option { background: var(--lu-surface-haute); color: var(--lu-blanc); }

/* Champs date : icône du sélecteur lisible sur fond sombre */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(0.75);
    cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--lu-cyan);
    cursor: pointer;
}
input[type="file"] { color: var(--lu-gris-clair); font-size: var(--lu-t-14); }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--lu-e-4);
}

.form-hint {
    margin-top: 6px;
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    line-height: 1.45;
}

.form-section {
    margin-top: var(--lu-e-6);
    padding-top: var(--lu-e-6);
    border-top: 1px solid var(--lu-filet);
}
.form-section-title {
    margin-bottom: var(--lu-e-4);
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-16);
    font-weight: 600;
    color: var(--lu-or);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--lu-e-3);
    margin-top: var(--lu-e-6);
    padding-top: var(--lu-e-4);
    border-top: 1px solid var(--lu-filet);
    flex-wrap: wrap;
}

.checkbox-group { display: flex; flex-direction: column; gap: var(--lu-e-2); }
.checkbox-item {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    padding: 9px var(--lu-e-3);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    cursor: pointer;
    transition: var(--lu-transition);
}
.checkbox-item:hover { border-color: var(--lu-cyan); }
.checkbox-item label { margin: 0; cursor: pointer; }

/* Case à cocher alignée dans un .form-group */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--lu-gris-clair);
    cursor: pointer;
    margin: 0;
}
.form-check input { flex: none; }

/* =============================================
   TABLEAUX
   ============================================= */
.table-container {
    overflow-x: auto;
    border-radius: var(--lu-rayon-carte);
    border: 1px solid var(--lu-filet);
    background: var(--lu-surface);
}
.table-container > table, .table-container > .data-table { border: none; border-radius: 0; }

.data-table,
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    overflow: hidden;
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-14);
}

.data-table thead th,
table thead th {
    padding: 12px var(--lu-e-4);
    background: var(--lu-surface-haute);
    border-bottom: 1px solid var(--lu-or-brun);
    text-align: left;
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lu-gris);
    white-space: nowrap;
}
.data-table thead th[data-sort],
table thead th[data-sort] { cursor: pointer; transition: var(--lu-transition); }
.data-table thead th[data-sort]:hover,
table thead th[data-sort]:hover { color: var(--lu-or); }

/* Indicateur de tri (posé par app.js) */
thead th[data-sort]::after {
    content: "\f0dc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 6px;
    opacity: 0.3;
    font-size: 0.7em;
}
thead th.sort-asc::after  { content: "\f0de"; opacity: 1; color: var(--lu-or); }
thead th.sort-desc::after { content: "\f0dd"; opacity: 1; color: var(--lu-or); }

.data-table tbody td,
table tbody td {
    padding: 12px var(--lu-e-4);
    border-bottom: 1px solid var(--lu-filet);
    color: var(--lu-gris-clair);
    vertical-align: middle;
}
.data-table tbody tr:last-child td,
table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr,
table tbody tr { transition: background var(--lu-transition); }
.data-table tbody tr:hover,
table tbody tr:hover { background: var(--lu-surface-haute); }
.data-table tbody tr.clickable, table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.inactive, table tbody tr.inactive { opacity: 0.5; }

.data-table td strong, table td strong { color: var(--lu-blanc); }

.col-right  { text-align: right; }
.col-center { text-align: center; }
.col-nowrap { white-space: nowrap; }

/* Ligne de total */
.data-table tfoot td,
.data-table tr.total-row td,
table tfoot td {
    padding: 12px var(--lu-e-4);
    background: rgba(240, 182, 43, 0.06);
    border-top: 1px solid var(--lu-or-brun);
    border-bottom: none;
    font-family: var(--lu-police-texte);
    font-weight: 600;
    color: var(--lu-or);
    text-transform: uppercase;
    font-size: var(--lu-t-12);
    letter-spacing: 0.06em;
}
.data-table tfoot td strong, table tfoot td strong {
    color: var(--lu-or-clair);
    font-size: var(--lu-t-16);
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Champs éditables dans une cellule */
td .form-control, td select, td input { padding: 6px 9px; font-size: var(--lu-t-14); }

/* =============================================
   BADGES & STATUS PILLS
   ============================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--lu-rayon-net);
    border: 1px solid transparent;
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* Rôles : l'or pour le statut le plus élevé, le cyan pour l'opérationnel */
.badge-architecte  { background: var(--lu-cyan); color: var(--lu-noir); border-color: var(--lu-cyan); }
.badge-super_admin { background: var(--lu-degrade-or); color: var(--lu-sur-or); }
.badge-admin       { background: transparent; border-color: var(--lu-cyan); color: var(--lu-cyan); }
.badge-client      { background: transparent; border-color: var(--lu-filet); color: var(--lu-gris-clair); }

/* Badges sémantiques */
.badge-success { background: var(--lu-succes-fond); color: var(--lu-succes); border-color: rgba(34,197,139,.35); }
.badge-info    { background: var(--lu-info-fond);   color: var(--lu-cyan);   border-color: rgba(0,168,240,.35); }
.badge-warning { background: var(--lu-alerte-fond); color: var(--lu-or);     border-color: rgba(240,182,43,.35); }
.badge-danger  { background: var(--lu-erreur-fond); color: var(--lu-erreur); border-color: rgba(226,72,63,.35); }
.badge-neutral { background: var(--lu-surface-haute); color: var(--lu-gris-clair); border-color: var(--lu-filet); }

/* Pastilles de statut (pilules, pour les états d'un enregistrement) */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--lu-e-1);
    padding: 3px 11px;
    border-radius: var(--lu-rayon-pilule);
    border: 1px solid transparent;
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill.success { background: var(--lu-succes-fond); color: var(--lu-succes); border-color: rgba(34,197,139,.35); }
.status-pill.info    { background: var(--lu-info-fond);   color: var(--lu-cyan);   border-color: rgba(0,168,240,.35); }
.status-pill.warning { background: var(--lu-alerte-fond); color: var(--lu-or);     border-color: rgba(240,182,43,.35); }
.status-pill.danger  { background: var(--lu-erreur-fond); color: var(--lu-erreur); border-color: rgba(226,72,63,.35); }
.status-pill.neutral { background: var(--lu-surface-haute); color: var(--lu-gris); border-color: var(--lu-filet); }

/* =============================================
   ALERTES
   ============================================= */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-3);
    padding: 13px var(--lu-e-4);
    margin-bottom: var(--lu-e-4);
    border: 1px solid;
    border-radius: var(--lu-rayon-net);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.alert i:first-child { margin-top: 3px; flex: none; }
.alert-success { background: var(--lu-succes-fond); border-color: rgba(34,197,139,.4);  color: var(--lu-succes); }
.alert-error,
.alert-danger  { background: var(--lu-erreur-fond); border-color: rgba(226,72,63,.4);   color: var(--lu-erreur); }
.alert-warning { background: var(--lu-alerte-fond); border-color: rgba(240,182,43,.4);  color: var(--lu-or); }
.alert-info    { background: var(--lu-info-fond);   border-color: rgba(0,168,240,.4);   color: var(--lu-cyan); }
.alert strong { color: inherit; }

/* Encadré contextuel : filet vertical, texte plus lisible que l'alerte */
.alert-box {
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3) var(--lu-e-4);
    border-radius: var(--lu-rayon-net);
    border-left: 3px solid;
    background: var(--lu-surface);
    color: var(--lu-gris-clair);
    font-size: 0.9375rem;
    line-height: 1.55;
}
.alert-box i:first-child { margin-top: 4px; flex: none; }
.alert-box > div { max-width: var(--lu-largeur-texte); }
.alert-box.info    { border-color: var(--lu-cyan);   background: var(--lu-info-fond); }
.alert-box.info i:first-child    { color: var(--lu-cyan); }
.alert-box.success { border-color: var(--lu-succes); background: var(--lu-succes-fond); }
.alert-box.success i:first-child { color: var(--lu-succes); }
.alert-box.warning { border-color: var(--lu-or);     background: var(--lu-alerte-fond); }
.alert-box.warning i:first-child { color: var(--lu-or); }
.alert-box.danger  { border-color: var(--lu-erreur); background: var(--lu-erreur-fond); }
.alert-box.danger i:first-child  { color: var(--lu-erreur); }

/* =============================================
   MESSAGES FLASH (toast en bas d'écran)
   ============================================= */
.flash-message {
    position: fixed;
    bottom: var(--lu-e-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    max-width: min(560px, calc(100vw - 32px));
    padding: 13px var(--lu-e-4);
    background: var(--lu-surface-haute);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    box-shadow: var(--lu-ombre-2);
    color: var(--lu-blanc);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: opacity 300ms ease, transform 300ms ease;
}
.flash-message.flash-success { border-color: rgba(34,197,139,.5); }
.flash-message.flash-success > i:first-child { color: var(--lu-succes); }
.flash-message.flash-error   { border-color: rgba(226,72,63,.5); }
.flash-message.flash-error > i:first-child   { color: var(--lu-erreur); }
.flash-message.flash-warning { border-color: rgba(240,182,43,.5); }
.flash-message.flash-warning > i:first-child { color: var(--lu-or); }

.flash-close {
    margin-left: var(--lu-e-2);
    background: none;
    border: none;
    color: var(--lu-gris);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--lu-transition);
}
.flash-close:hover { color: var(--lu-blanc); }

/* =============================================
   BANDEAU DE STATISTIQUES
   ============================================= */
.stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lu-e-3) var(--lu-e-6);
    padding: var(--lu-e-3) var(--lu-e-4);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    font-size: var(--lu-t-14);
    color: var(--lu-gris);
}
.stats-bar strong { color: var(--lu-cyan); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats-bar .stats-or strong { color: var(--lu-or); }

/* =============================================
   BARRE D'OUTILS / FILTRES
   ============================================= */
.toolbar,
.list-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--lu-e-2);
    padding: var(--lu-e-3) var(--lu-e-4);
    margin-bottom: var(--lu-e-4);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
.toolbar > input:not([type="checkbox"]):not([type="radio"]),
.toolbar > select,
.list-controls > input, .list-controls > select { width: auto; }
.toolbar-spacer { margin-left: auto; }

.toggle-control {
    display: inline-flex;
    align-items: center;
    gap: var(--lu-e-2);
    font-size: var(--lu-t-14);
    color: var(--lu-gris-clair);
    cursor: pointer;
}

/* =============================================
   ÉTAT VIDE
   ============================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-12) var(--lu-e-6);
    background: var(--lu-surface);
    border: 1px dashed var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    text-align: center;
    color: var(--lu-gris);
}
.empty-state i.empty-state-icon,
.empty-state > i:first-child {
    font-size: 2.25rem;
    color: var(--lu-or-profond);
}
.empty-state h3 { font-size: var(--lu-t-21); color: var(--lu-blanc); }
.empty-state .empty-state-message,
.empty-state p {
    max-width: 46ch;
    font-size: 0.9375rem;
    color: var(--lu-gris);
}

/* =============================================
   ONGLETS
   ============================================= */
.tabs {
    display: flex;
    gap: var(--lu-e-1);
    margin-bottom: var(--lu-e-6);
    border-bottom: 1px solid var(--lu-filet);
    overflow-x: auto;
}
.tab {
    position: relative;
    padding: 11px var(--lu-e-4);
    background: none;
    border: none;
    color: var(--lu-gris);
    font-family: var(--lu-police-texte);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--lu-transition);
}
.tab:hover { color: var(--lu-blanc); }
.tab.active { color: var(--lu-or); }
.tab.active::after {
    content: "";
    position: absolute;
    left: var(--lu-e-3);
    right: var(--lu-e-3);
    bottom: -1px;
    height: 2px;
    background: var(--lu-degrade-or);
    border-radius: var(--lu-rayon-pilule);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* =============================================
   MODALES
   ============================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--lu-e-4);
    background: rgba(4, 6, 10, 0.78);
    backdrop-filter: blur(4px);
}
.modal-overlay.active { display: flex; }

.modal {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--lu-surface-haute);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    box-shadow: var(--lu-ombre-2);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-3);
    padding: var(--lu-e-4) var(--lu-e-6);
    border-bottom: 1px solid var(--lu-filet);
}
.modal-header h3 { font-size: var(--lu-t-21); margin: 0; }
.modal-close {
    background: none;
    border: none;
    color: var(--lu-gris);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--lu-transition);
}
.modal-close:hover { color: var(--lu-blanc); }
.modal-body { padding: var(--lu-e-4) var(--lu-e-6); }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--lu-e-2);
    padding: var(--lu-e-3) var(--lu-e-6);
    border-top: 1px solid var(--lu-filet);
    background: rgba(4, 6, 10, 0.4);
}

/* =============================================
   WIZARD (barre de progression d'un formulaire multi-étapes)
   ============================================= */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--lu-e-3) var(--lu-e-6);
    background: var(--lu-surface);
    border-bottom: 1px solid var(--lu-filet);
}
.wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lu-e-2);
    padding: var(--lu-e-2);
    border-radius: var(--lu-rayon-net);
}
.wizard-step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    color: var(--lu-gris);
    font-family: var(--lu-police-texte);
    font-weight: 600;
    font-size: var(--lu-t-14);
}
.wizard-step-label {
    font-size: var(--lu-t-12);
    font-weight: 500;
    color: var(--lu-gris);
    text-align: center;
}
.wizard-step.done .wizard-step-circle {
    background: var(--lu-succes-fond);
    border-color: var(--lu-succes);
    color: var(--lu-succes);
}
.wizard-step.active .wizard-step-circle {
    background: var(--lu-degrade-or);
    border-color: transparent;
    color: var(--lu-sur-or);
    box-shadow: var(--lu-lueur-or);
}
.wizard-step.active .wizard-step-label { color: var(--lu-or); font-weight: 600; }
.wizard-step-connector {
    flex: 0 0 24px;
    height: 1px;
    background: var(--lu-filet);
    align-self: center;
    margin-top: -18px;
}
.wizard-step-connector.done { background: var(--lu-succes); }

/* =============================================
   TABLEAU DE BORD
   ============================================= */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--lu-e-4);
}
.dashboard-card {
    display: flex;
    align-items: center;
    gap: var(--lu-e-4);
    padding: var(--lu-e-4);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    color: inherit;
    transition: var(--lu-transition);
}
.dashboard-card:hover {
    border-color: var(--lu-or-brun);
    background: var(--lu-surface-haute);
    transform: translateY(-2px);
}
.dashboard-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: var(--lu-rayon-carte);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    color: var(--lu-cyan);
    font-size: 1.1rem;
}
.dashboard-card-icon.or {
    background: var(--lu-degrade-or);
    border-color: transparent;
    color: var(--lu-sur-or);
}
.dashboard-card-content h3 {
    font-family: var(--lu-police-texte);
    font-weight: 600;
    font-size: var(--lu-t-16);
    color: var(--lu-blanc);
    margin-bottom: 2px;
}
.dashboard-card-content p {
    font-size: var(--lu-t-14);
    color: var(--lu-gris);
    margin: 0;
}
.dashboard-section { margin-top: var(--lu-e-8); }

/* =============================================
   AVATAR (profil, édition utilisateur)
   ============================================= */
.avatar-upload-wrapper { display: inline-flex; flex-direction: column; align-items: center; }
.avatar-preview {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lu-champ);
    border: 1px solid var(--lu-or-profond);
    color: var(--lu-or-profond);
    font-size: 2.75rem;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================
   ZONE DE DÉPÔT DE FICHIERS
   ============================================= */
.file-upload-zone {
    padding: var(--lu-e-8) var(--lu-e-4);
    background: var(--lu-champ);
    border: 1px dashed var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    text-align: center;
    color: var(--lu-gris);
    cursor: pointer;
    transition: var(--lu-transition);
}
.file-upload-zone:hover { border-color: var(--lu-cyan); color: var(--lu-gris-clair); }
.file-upload-zone i { font-size: 1.75rem; color: var(--lu-or-profond); display: block; margin-bottom: var(--lu-e-2); }
.file-upload-zone p { margin: 0 auto; font-size: var(--lu-t-14); }
.file-upload-zone input[type="file"] { display: none; }

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--lu-e-3);
}
.file-item {
    padding: var(--lu-e-3);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    font-size: var(--lu-t-14);
}

/* =============================================
   PAGE DE CONNEXION
   ============================================= */
.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--lu-e-6);
    background: var(--lu-noir);
    background-image: var(--lu-degrade-fond);
}
/* Halo doré très diffus derrière la carte : la seule zone brillante de l'écran */
.login-body::before {
    content: "";
    position: fixed;
    top: -18vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 120vw);
    height: 60vh;
    background: radial-gradient(50% 50% at 50% 50%, rgba(240, 182, 43, 0.10), transparent 70%);
    pointer-events: none;
}

.login-container { width: 100%; max-width: 460px; position: relative; }

.login-card {
    padding: var(--lu-e-12) var(--lu-e-8) var(--lu-e-8);
    background: linear-gradient(180deg, var(--lu-surface-relief), var(--lu-surface));
    border: 1px solid var(--lu-or-brun);
    border-radius: var(--lu-rayon-carte);
    box-shadow: var(--lu-ombre-2);
    clip-path: polygon(0 0, calc(100% - var(--lu-encoche)) 0, 100% var(--lu-encoche), 100% 100%, 0 100%);
}

.login-logo { text-align: center; margin-bottom: var(--lu-e-8); }
.login-logo .lu-logo, .login-logo-img { margin: 0 auto; max-width: 320px; }

.login-title {
    font-family: var(--lu-police-lockup);
    font-weight: 300;
    font-size: var(--lu-t-14);
    text-transform: uppercase;
    letter-spacing: var(--lu-approche-lockup);
    color: var(--lu-blanc);
    text-align: center;
    margin-bottom: var(--lu-e-2);
}
.login-subtitle {
    margin: 0 auto var(--lu-e-8);
    max-width: 34ch;
    text-align: center;
    font-size: var(--lu-t-14);
    color: var(--lu-gris);
}

.login-form .form-group { margin-bottom: var(--lu-e-4); }
.login-form label { font-size: var(--lu-t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lu-gris); }
.login-form label i { color: var(--lu-or-profond); }
.login-form .btn { margin-top: var(--lu-e-4); }

.login-footer {
    margin-top: var(--lu-e-8);
    padding-top: var(--lu-e-4);
    border-top: 1px solid var(--lu-filet);
    text-align: center;
}
.login-footer p { margin: 0 auto; font-size: var(--lu-t-12); color: var(--lu-gris); }
.login-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--lu-e-2);
    margin-top: var(--lu-e-2);
    font-size: var(--lu-t-14);
    font-weight: 600;
    color: var(--lu-or);
}

/* =============================================
   NUANCIER (page Design System)
   ============================================= */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
    gap: var(--lu-e-4);
}
.color-swatch {
    overflow: hidden;
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
.color-swatch-preview { height: 88px; }
.color-swatch-info { padding: var(--lu-e-3) var(--lu-e-4); }
.color-swatch-info b { display: block; color: var(--lu-blanc); font-size: 0.9375rem; }
.color-swatch-info code { font-size: var(--lu-t-14); color: var(--lu-or); }
.color-swatch-info small { display: block; margin-top: 6px; color: var(--lu-gris); font-size: var(--lu-t-12); line-height: 1.45; }
.ratio {
    display: inline-block;
    margin-top: var(--lu-e-2);
    padding: 1px 6px;
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    font-size: var(--lu-t-12);
    color: var(--lu-gris-clair);
}

/* =============================================
   UTILITAIRES
   ============================================= */
.text-or     { color: var(--lu-or) !important; }
.text-cyan   { color: var(--lu-cyan) !important; }
.text-gris   { color: var(--lu-gris) !important; }
.text-blanc  { color: var(--lu-blanc) !important; }
.text-succes { color: var(--lu-succes) !important; }
.text-erreur { color: var(--lu-erreur) !important; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.mesure      { max-width: var(--lu-largeur-texte); }
.rangee      { display: flex; align-items: center; gap: var(--lu-e-3); flex-wrap: wrap; }
.rangee-fin  { display: flex; align-items: center; gap: var(--lu-e-3); flex-wrap: wrap; justify-content: flex-end; }
.pile        { display: flex; flex-direction: column; gap: var(--lu-e-3); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--lu-ombre-2);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar.collapsed { width: var(--lu-sidebar-w); }
    .sidebar.collapsed .sidebar-menu a { justify-content: flex-start; padding: 10px var(--lu-e-3); }
    .sidebar.collapsed .sidebar-menu a span,
    .sidebar.collapsed .sidebar-section-title span,
    .sidebar.collapsed .sidebar-section-subtitle,
    .sidebar.collapsed .powered-text { display: initial; }
    .sidebar.collapsed .powered-icon { display: none !important; }

    .main-content,
    body.sidebar-collapsed .main-content { margin-left: 0; }
}

@media (max-width: 768px) {
    .top-bar { height: var(--lu-topbar-h-mobile); padding: 0 var(--lu-e-2); gap: var(--lu-e-1); }
    .sidebar { top: var(--lu-topbar-h-mobile); }
    .sidebar-overlay { inset: var(--lu-topbar-h-mobile) 0 0 0; }
    .lu-logo-menu { height: 44px; }
    .top-bar-logo { padding: 0 var(--lu-e-1); }
    .top-bar-info { display: none; }
    .btn-topbar .btn-text { display: none; }
    .lu-logo-compact { width: 118px; }

    .main-content { padding: var(--lu-e-6) var(--lu-e-4) var(--lu-e-12); }

    .page-header { align-items: flex-start; flex-direction: column; }
    .page-header h1 { font-size: var(--lu-t-26); }

    .card-body, .card-header { padding: var(--lu-e-4); }
    .form-row { grid-template-columns: 1fr; }

    /* Tableaux : défilement horizontal plutôt que compression illisible */
    .data-table, table { display: block; overflow-x: auto; white-space: nowrap; }

    .wizard-steps { padding: var(--lu-e-3); }
    .wizard-step-label { display: none; }
    .wizard-step-connector { margin-top: 0; }

    .login-card { padding: var(--lu-e-8) var(--lu-e-4) var(--lu-e-6); }
    .flash-message { bottom: var(--lu-e-3); }
}

@media (max-width: 480px) {
    .page-header h1 { font-size: var(--lu-t-21); }
    .stats-bar { gap: var(--lu-e-2) var(--lu-e-4); font-size: var(--lu-t-12); }
    .btn { padding: 11px 18px; }
}

/* Écrans tactiles : cible de 44×44px minimum (charte § Accessibilité).
   On agrandit la zone cliquable sans toucher à la taille visuelle — via ::before,
   car ::after porte déjà les infobulles de la top bar. */
@media (pointer: coarse) {
    .btn-topbar,
    .sidebar-toggle,
    .top-bar-avatar,
    .btn-icon-round,
    .btn-icon-only,
    .btn-action-quick,
    .flash-close,
    .modal-close { position: relative; }

    .btn-topbar::before,
    .sidebar-toggle::before,
    .top-bar-avatar::before,
    .btn-icon-round::before,
    .btn-icon-only::before,
    .btn-action-quick::before,
    .flash-close::before,
    .modal-close::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* Impression : on repasse en clair, l'encre noire n'est pas une option */
@media print {
    body { background: #fff; color: #000; }
    .top-bar, .sidebar, .sidebar-overlay, .flash-message, .page-header-actions { display: none !important; }
    .main-content { margin: 0; padding: 0; }
    .card, .data-table, table { border-color: #ccc; background: #fff; }
    h1, h2, h3, strong, td, th { color: #000 !important; }
}

/* =============================================================================
   PHASE 1 — LA CARTE DE MEMBRE ET LE COCKPIT
   -----------------------------------------------------------------------------
   Mobile d'abord : 95 % des usages se font au pouce. La barre basse remplace
   la colonne de gauche sous 1024 px, et les actions tombent en bas d'écran.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Portraits
   --------------------------------------------------------------------------- */
.lu-portrait {
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border-radius: var(--lu-rayon-carte);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    color: var(--lu-or-profond);
    font-family: var(--lu-police-titre);
    line-height: 1;
}
.lu-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lu-portrait-mini  { width: 44px; height: 44px; font-size: 0.9rem; }
.lu-portrait-grand { width: 72px; height: 72px; font-size: 1.4rem; }
.lu-portrait-vide  { color: var(--lu-or-profond); }

/* ---------------------------------------------------------------------------
   La carte de membre — objet signature.
   Le cadre évolue avec le niveau : c'est la récompense visible.
   --------------------------------------------------------------------------- */
.lu-carte {
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-3);
    padding: var(--lu-e-4);
    background: linear-gradient(180deg, var(--lu-surface-relief), var(--lu-surface));
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    clip-path: polygon(0 0, calc(100% - var(--lu-encoche)) 0, 100% var(--lu-encoche), 100% 100%, 0 100%);
}
.lu-carte-simple     { border-color: var(--lu-filet); }
.lu-carte-argente    { border-color: #6B7688; }
.lu-carte-dore       { border-color: var(--lu-or-brun); }
.lu-carte-legendaire { border-color: var(--lu-or-profond); box-shadow: var(--lu-lueur-or); }

.lu-carte-lien { display: block; color: inherit; }
.lu-carte-lien:hover .lu-carte { border-color: var(--lu-cyan); }

.lu-carte-tete { display: flex; align-items: center; gap: var(--lu-e-3); }
.lu-carte-identite { flex: 1; min-width: 0; }
.lu-carte-nom {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-18);
    color: var(--lu-blanc);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.lu-carte-vrainom { font-size: var(--lu-t-12); color: var(--lu-gris); }
.lu-carte-entreprise { font-size: var(--lu-t-14); color: var(--lu-cyan); margin-top: 2px; }
.lu-carte-entreprise span { color: var(--lu-gris); }

.lu-carte-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: var(--lu-e-2);
}
.lu-stat-ligne {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--lu-e-2);
    padding: 7px 10px;
    background: var(--lu-champ);
    border-radius: var(--lu-rayon-net);
    font-size: var(--lu-t-12);
}
.lu-stat-ligne span { color: var(--lu-gris); flex: none; }
.lu-stat-ligne b { color: var(--lu-gris-clair); font-weight: 600; text-align: right; }

.lu-carte-citation {
    margin: 0;
    padding-left: var(--lu-e-3);
    border-left: 2px solid var(--lu-or-brun);
    color: var(--lu-gris-clair);
    font-size: var(--lu-t-14);
    font-style: italic;
}

.lu-carte-boite {
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
}
.lu-carte-boite-titre {
    font-size: var(--lu-t-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--lu-gris);
    margin-bottom: var(--lu-e-2);
}
.lu-carte-logo {
    width: 64px; height: 64px;
    object-fit: contain;
    float: right;
    margin: 0 0 var(--lu-e-2) var(--lu-e-3);
}
.lu-carte-desc { font-size: var(--lu-t-14); color: var(--lu-gris-clair); max-width: none; }

.lu-carte-services { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.lu-carte-services li { font-size: var(--lu-t-14); }
.lu-carte-services b { display: block; color: var(--lu-blanc); font-weight: 600; }
.lu-carte-services span { color: var(--lu-gris); font-size: var(--lu-t-12); }

.lu-carte-compacte { padding: var(--lu-e-3); gap: var(--lu-e-2); }
.lu-carte-compacte .lu-carte-nom { font-size: var(--lu-t-16); }

/* ---------------------------------------------------------------------------
   Niveau
   --------------------------------------------------------------------------- */
.lu-badge-niveau-lg { width: 58px; height: 58px; font-size: var(--lu-t-26); }

.lu-niveau-tete { display: flex; align-items: center; gap: var(--lu-e-3); margin-bottom: var(--lu-e-4); }
.lu-niveau-titre { font-size: var(--lu-t-21); margin: 0; }
.lu-niveau-sous { font-size: var(--lu-t-14); color: var(--lu-gris); margin: 0; }
.lu-niveau-avantage {
    margin: var(--lu-e-3) 0 0;
    font-size: var(--lu-t-14);
    color: var(--lu-or);
    max-width: none;
}

/* ---------------------------------------------------------------------------
   Jauge de remplissage — distincte de la barre XP :
   le remplissage n'est pas de la progression de jeu, il est doré.
   --------------------------------------------------------------------------- */
.lu-jauge {
    height: 10px;
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    overflow: hidden;
}
.lu-jauge > i {
    display: block;
    height: 100%;
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-degrade-or);
    transition: width 600ms cubic-bezier(.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------------
   Blocs et listes du cockpit
   --------------------------------------------------------------------------- */
.lu-cockpit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--lu-e-4);
    align-items: start;
}
.lu-cockpit > .card { margin: 0; }

.lu-titre-bloc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-3);
    margin-bottom: var(--lu-e-3);
}
.lu-titre-bloc h2 { font-size: var(--lu-t-21); margin: 0; }
.lu-titre-bloc h3 { margin: 0; }

.lu-deux-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--lu-e-6);
    align-items: start;
}
.lu-deux-colonnes > .card, .lu-deux-colonnes .pile > .card { margin: 0; }
.lu-colonne-carte { position: sticky; top: calc(var(--lu-topbar-h) + var(--lu-e-4)); }

.lu-manquants { margin: var(--lu-e-3) 0; font-size: var(--lu-t-14); color: var(--lu-gris-clair); }
.lu-manquants span { color: var(--lu-gris); }

.lu-vide-doux { font-size: var(--lu-t-14); color: var(--lu-gris); }

.lu-liste { list-style: none; display: flex; flex-direction: column; }
.lu-liste > li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3) 0;
    border-bottom: 1px solid var(--lu-filet);
}
.lu-liste > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lu-liste > li:first-child { padding-top: 0; }
.lu-liste-corps { flex: 1; min-width: 0; }
.lu-liste-corps b { display: block; color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-liste-corps span { display: block; color: var(--lu-gris); font-size: var(--lu-t-12); }

.lu-points {
    flex: none;
    font-family: var(--lu-police-texte);
    font-weight: 600;
    font-size: var(--lu-t-14);
    color: var(--lu-cyan);
    font-variant-numeric: tabular-nums;
}
.lu-points.negatif { color: var(--lu-erreur); }
.lu-rang { flex: none; font-size: 1.1rem; width: 24px; text-align: center; }

.lu-liste-plate { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.lu-liste-plate li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    font-size: var(--lu-t-14);
    color: var(--lu-gris);
}
.lu-a-venir { border-style: dashed; }

/* Échelle des niveaux */
.lu-echelle { list-style: none; display: flex; flex-direction: column; }
.lu-echelle > li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-2) var(--lu-e-2);
    border-bottom: 1px solid var(--lu-filet);
    opacity: 0.55;
}
.lu-echelle > li:last-child { border-bottom: 0; }
.lu-echelle > li.atteint { opacity: 1; }
.lu-echelle > li.courant {
    opacity: 1;
    background: linear-gradient(90deg, rgba(240, 182, 43, .12), transparent 70%);
    border-radius: var(--lu-rayon-net);
}
.lu-echelle > li .lu-badge-niveau-sm { filter: grayscale(1); }
.lu-echelle > li.atteint .lu-badge-niveau-sm,
.lu-echelle > li.courant .lu-badge-niveau-sm { filter: none; }
.lu-echelle-xp {
    flex: none;
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Formulaire de la carte
   --------------------------------------------------------------------------- */
.lu-form-carte { display: flex; flex-direction: column; gap: var(--lu-e-4); }
.lu-form-carte > .card { margin: 0; }

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

/* Cadreur carré */
.lu-cadreur {
    display: flex;
    gap: var(--lu-e-4);
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: var(--lu-e-4);
    margin-bottom: var(--lu-e-4);
    border-bottom: 1px solid var(--lu-filet);
}
.lu-cadreur-fenetre {
    position: relative;
    flex: none;
    width: 160px; height: 160px;
    overflow: hidden;
    border-radius: var(--lu-rayon-carte);
    background: var(--lu-champ);
    border: 1px solid var(--lu-or-profond);
    display: grid;
    place-items: center;
    touch-action: none;
}
.lu-cadreur-fenetre img {
    display: block;
    max-width: none;
    object-fit: cover;
    width: 100%; height: 100%;
}
.lu-cadreur-fenetre img.cadrable { position: absolute; cursor: grab; width: auto; height: auto; }
.lu-cadreur-fenetre.attrape img.cadrable { cursor: grabbing; }
.lu-cadreur-vide {
    font-family: var(--lu-police-titre);
    font-size: 2rem;
    color: var(--lu-or-profond);
}
.lu-cadreur-outils { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: var(--lu-e-2); align-items: flex-start; }
.lu-cadreur-zoom { width: 100%; }
.lu-cadreur-zoom label {
    font-size: var(--lu-t-12);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lu-gris);
}
.lu-cadreur-zoom input[type="range"] { width: 100%; accent-color: var(--lu-or); }

/* Logo d'entreprise */
.lu-logo-champ {
    display: flex;
    gap: var(--lu-e-4);
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: var(--lu-e-4);
    margin-bottom: var(--lu-e-4);
    border-bottom: 1px solid var(--lu-filet);
}
.lu-logo-apercu {
    flex: none;
    width: 96px; height: 96px;
    display: grid; place-items: center;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    color: var(--lu-gris);
    font-size: 1.6rem;
    overflow: hidden;
}
.lu-logo-apercu img { width: 100%; height: 100%; object-fit: contain; }

/* Services */
.lu-service {
    display: flex;
    gap: var(--lu-e-3);
    align-items: flex-start;
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    margin-bottom: var(--lu-e-2);
}
.lu-service-champs { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.lu-service-suppr {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    cursor: pointer;
}
.lu-service-suppr input { flex: none; }
.lu-service-suppr:hover { color: var(--lu-erreur); }

/* Barre d'enregistrement collante : le bouton reste sous le pouce */
.lu-barre-enregistrer {
    position: sticky;
    bottom: 0;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: rgba(11, 15, 21, 0.94);
    backdrop-filter: blur(8px);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}

/* ---------------------------------------------------------------------------
   Liste des membres (maître du jeu)
   --------------------------------------------------------------------------- */
.lu-membres { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.lu-membre {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    transition: var(--lu-transition);
}
.lu-membre:hover { border-color: var(--lu-or-brun); background: var(--lu-surface-haute); }
.lu-membre-inactif { opacity: 0.55; }
.lu-membre-corps { flex: 1; min-width: 0; }
.lu-membre-nom { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-16); }
.lu-membre-pseudo { color: var(--lu-gris); font-weight: 400; font-size: var(--lu-t-12); }
.lu-membre-meta {
    color: var(--lu-gris);
    font-size: var(--lu-t-12);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lu-membre-jetons { display: flex; flex-wrap: wrap; gap: var(--lu-e-1); margin-top: var(--lu-e-2); }
.lu-membre-actions { flex: none; display: flex; align-items: center; gap: var(--lu-e-1); }

/* Badge du rôle « membre » */
.badge-membre { background: transparent; border-color: var(--lu-filet); color: var(--lu-gris-clair); }

/* ---------------------------------------------------------------------------
   BARRE DE NAVIGATION BASSE (mobile)
   Zone du pouce. Le bouton central en relief porte l'action du moment.
   --------------------------------------------------------------------------- */
.nav-mobile { display: none; }

@media (max-width: 1024px) {
    .nav-mobile {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 180;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: end;
        gap: var(--lu-e-1);
        padding: var(--lu-e-2) var(--lu-e-2) max(var(--lu-e-2), env(safe-area-inset-bottom));
        background: rgba(11, 15, 21, 0.96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--lu-or-brun);
    }

    .nav-mobile-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        min-height: 44px;
        padding: 4px 2px;
        border-radius: var(--lu-rayon-net);
        color: var(--lu-gris);
        font-size: 0.6875rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }
    .nav-mobile-icone { position: relative; font-size: 1.05rem; line-height: 1; }

    /* Pastille de rappel : combien de missions attendent le membre */
    .nav-mobile-pastille {
        position: absolute;
        top: -6px; right: -10px;
        min-width: 17px; height: 17px;
        padding: 0 4px;
        display: grid; place-items: center;
        border-radius: var(--lu-rayon-pilule);
        background: var(--lu-cyan);
        color: var(--lu-noir);
        font-size: 0.625rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        border: 2px solid var(--lu-noir);
    }
    .nav-mobile-item.actif { color: var(--lu-or); }
    .nav-mobile-item:hover { color: var(--lu-blanc); }
    .nav-mobile-item.actif:hover { color: var(--lu-or-clair); }

    /* Bouton central : l'action principale, en relief au-dessus de la barre */
    .nav-mobile-central { color: var(--lu-sur-or); }
    .nav-mobile-central .nav-mobile-icone {
        display: grid;
        place-items: center;
        width: 46px; height: 46px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--lu-degrade-or);
        border: 2px solid var(--lu-noir);
        box-shadow: var(--lu-lueur-or);
        font-size: 1.1rem;
    }
    .nav-mobile-central .nav-mobile-label { color: var(--lu-or); }
    .nav-mobile-central.actif .nav-mobile-icone { filter: brightness(1.1); }

    /* La barre basse porte les 5 destinations principales ; le menu burger
       garde l'accès au reste de l'espace (aucune impasse de navigation). */
    .main-content { padding-bottom: 104px; }
    .sidebar { bottom: 88px; }
    .sidebar-overlay { bottom: 88px; }

    /* Les raccourcis du haut deviennent inutiles : la barre basse les porte */
    .top-bar-right .btn-topbar:not(.btn-topbar-settings) { display: none; }

    .lu-deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: var(--lu-e-4); }
    .lu-colonne-carte { position: static; }
}

@media (max-width: 768px) {
    .lu-cockpit { grid-template-columns: minmax(0, 1fr); }
    .lu-membre { flex-wrap: wrap; }
    .lu-membre-actions { width: 100%; justify-content: flex-end; }
    .lu-cadreur-fenetre { width: 128px; height: 128px; }
    .lu-service { flex-direction: column; }
    .lu-service-suppr { align-self: flex-end; }
    .lu-barre-enregistrer { bottom: var(--lu-e-2); }
}

/* =============================================================================
   PHASE 2 — LE PLATEAU ET LES DUOS
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Filtres en onglets (plateau)
   --------------------------------------------------------------------------- */
.lu-onglets-filtre {
    display: flex;
    gap: var(--lu-e-1);
    flex-wrap: wrap;
}
.lu-filtre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-champ);
    color: var(--lu-gris-clair);
    font-size: var(--lu-t-14);
    font-weight: 600;
    white-space: nowrap;
    transition: var(--lu-transition);
}
.lu-filtre span {
    font-variant-numeric: tabular-nums;
    color: var(--lu-gris);
    font-weight: 500;
}
.lu-filtre:hover { border-color: var(--lu-cyan); color: var(--lu-cyan); }
.lu-filtre:hover span { color: var(--lu-cyan); }
.lu-filtre.actif {
    background: var(--lu-degrade-or);
    border-color: transparent;
    color: var(--lu-sur-or);
}
.lu-filtre.actif span { color: var(--lu-sur-or); opacity: .75; }

/* ---------------------------------------------------------------------------
   Le plateau : une grille de tuiles
   --------------------------------------------------------------------------- */
.lu-grille-plateau {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: var(--lu-e-4);
    align-items: start;
}
.lu-grille-plateau > p { grid-column: 1 / -1; }

.lu-tuile {
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-3);
    height: 100%;
    padding: var(--lu-e-4);
    background: var(--lu-surface);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    color: inherit;
    transition: var(--lu-transition);
}
.lu-tuile:hover {
    border-color: var(--lu-cyan);
    background: var(--lu-surface-haute);
    transform: translateY(-2px);
}
.lu-tuile-rencontre { border-color: var(--lu-or-brun); }
.lu-tuile-rencontre:hover { border-color: var(--lu-or); }

.lu-tuile-tete { display: flex; align-items: center; gap: var(--lu-e-3); }
.lu-tuile-identite { flex: 1; min-width: 0; }
.lu-tuile-nom {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-16);
    color: var(--lu-blanc);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.lu-tuile-meta {
    font-size: var(--lu-t-12);
    color: var(--lu-cyan);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lu-tuile-vide { color: var(--lu-gris); font-style: italic; }

.lu-tuile-pouvoir {
    font-size: var(--lu-t-14);
    color: var(--lu-gris-clair);
    line-height: 1.4;
}

.lu-tuile-pied {
    margin-top: auto;
    padding-top: var(--lu-e-2);
    border-top: 1px solid var(--lu-filet);
    font-size: var(--lu-t-12);
}
.lu-tuile-appel { color: var(--lu-cyan); font-weight: 600; }
.lu-tuile-appel i { font-size: 0.7rem; }

/* Tampon « déjà joué ensemble » : la marque de collection */
.lu-tampon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--lu-or-profond);
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-alerte-fond);
    color: var(--lu-or);
    font-size: var(--lu-t-12);
    font-weight: 600;
    transform: rotate(-1.5deg);
}

/* ---------------------------------------------------------------------------
   Deux utilitaires nés avec les duos, restés parce qu'ils servent partout :
   une note citée (commentaire, motif) et un bandeau « quand / où ».
   --------------------------------------------------------------------------- */
.lu-note {
    margin: 0;
    padding-left: var(--lu-e-3);
    border-left: 2px solid var(--lu-filet);
    font-size: var(--lu-t-12);
    color: var(--lu-gris-clair);
    font-style: italic;
    max-width: none;
}

.lu-quand {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    margin: var(--lu-e-3) 0 0;
    padding: var(--lu-e-2) var(--lu-e-3);
    background: var(--lu-info-fond);
    border-radius: var(--lu-rayon-net);
    color: var(--lu-cyan);
    font-size: var(--lu-t-14);
    font-weight: 600;
    max-width: none;
}

.form-hint-inline { font-size: var(--lu-t-12); color: var(--lu-gris); font-weight: 400; }

@media (max-width: 768px) {
    .lu-grille-plateau { grid-template-columns: minmax(0, 1fr); }
    .lu-onglets-filtre { width: 100%; }
    .lu-filtre { flex: 1; justify-content: center; padding: 8px 10px; font-size: var(--lu-t-12); }
}

/* =============================================================================
   PHASE 3 — LE CARNET DE COUPS
   ============================================================================= */

.lu-coups { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-3); }

.lu-coup {
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-3);
    padding: var(--lu-e-4);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-left: 3px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
/* La couleur du filet gauche dit l'état du coup sans qu'on lise la pastille */
.lu-coup-transmis  { border-left-color: var(--lu-or); }
.lu-coup-pris      { border-left-color: var(--lu-cyan); }
.lu-coup-gagne     { border-left-color: var(--lu-succes); }
.lu-coup-perdu,
.lu-coup-refuse,
.lu-coup-abandonne { border-left-color: var(--lu-filet-fort); opacity: 0.72; }

.lu-coup-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lu-e-3);
    flex-wrap: wrap;
}
.lu-coup-contact { flex: 1; min-width: 0; }
.lu-coup-nom {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-18);
    color: var(--lu-blanc);
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.lu-coup-sens {
    margin: 2px 0 0;
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    max-width: none;
}
.lu-coup-sens b { color: var(--lu-gris-clair); font-weight: 600; }
.lu-coup-sens i { color: var(--lu-cyan); margin-right: 4px; }

.lu-coup-contexte {
    margin: 0;
    padding-left: var(--lu-e-3);
    border-left: 2px solid var(--lu-filet);
    font-size: var(--lu-t-14);
    color: var(--lu-gris-clair);
    max-width: none;
}

.lu-coup-coordonnees { display: flex; gap: var(--lu-e-2); flex-wrap: wrap; }

.lu-coup-actions {
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-2);
    flex-wrap: wrap;
    padding-top: var(--lu-e-2);
    border-top: 1px solid var(--lu-filet);
}
.lu-coup .alert-box { margin: 0; }

/* ---------------------------------------------------------------------------
   Bloc repliable : une action secondaire qui ne prend la place que si on la
   demande. <details> natif, donc fonctionne sans JavaScript.
   --------------------------------------------------------------------------- */
.lu-replier { display: inline-block; }
.lu-replier > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--lu-e-2);
}
.lu-replier > summary::-webkit-details-marker { display: none; }
.lu-replier > summary::marker { content: ''; }
.lu-replier[open] > summary { margin-bottom: var(--lu-e-3); }

.lu-replier-corps {
    display: block;
    min-width: min(340px, 100%);
    padding: var(--lu-e-3);
    background: var(--lu-surface-haute);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
.lu-replier-corps .form-group:last-of-type { margin-bottom: var(--lu-e-3); }

@media (max-width: 768px) {
    .lu-coup { padding: var(--lu-e-3); }
    .lu-coup-actions > form,
    .lu-coup-actions > .lu-replier { width: 100%; }
    .lu-coup-actions .btn { width: 100%; justify-content: center; }
    .lu-replier > summary { width: 100%; justify-content: center; }
}

/* =============================================================================
   PHASE 4 — LA MANCHE (RÉUNIONS ET MODE SOIRÉE)
   ============================================================================= */

.lu-reunion-quand {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    flex-wrap: wrap;
    font-size: var(--lu-t-14);
    font-weight: 600;
    color: var(--lu-cyan);
    text-transform: capitalize;
}
.lu-reunion-titre { margin: var(--lu-e-1) 0 0; font-size: var(--lu-t-26); }
.lu-reunion-soustitre { margin: var(--lu-e-1) 0 0; color: var(--lu-gris); font-size: var(--lu-t-14); }

.lu-conf-titre {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-18);
    color: var(--lu-or);
    line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Déroulé de la soirée
   --------------------------------------------------------------------------- */
.lu-deroule { list-style: none; display: flex; flex-direction: column; }
.lu-deroule > li {
    display: flex;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3) 0;
    border-bottom: 1px solid var(--lu-filet);
}
.lu-deroule > li:last-child { border-bottom: 0; padding-bottom: 0; }
.lu-deroule-heure {
    flex: none;
    width: 52px;
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-14);
    color: var(--lu-cyan);
    font-variant-numeric: tabular-nums;
}
.lu-deroule-corps { flex: 1; min-width: 0; }
.lu-deroule-corps b { display: block; color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-deroule-corps span { display: block; color: var(--lu-gris); font-size: var(--lu-t-12); }

/* Boutons de réponse de présence */
.lu-reponse-presence {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    flex-wrap: wrap;
    margin-top: var(--lu-e-4);
}

/* ---------------------------------------------------------------------------
   Invités
   --------------------------------------------------------------------------- */
.lu-invites { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-3); }
.lu-invite {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lu-e-4);
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    flex-wrap: wrap;
}
.lu-invite-corps { flex: 1; min-width: 180px; }
.lu-invite-nom { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-16); }
.lu-invite-actions { flex: none; display: flex; align-items: flex-start; gap: var(--lu-e-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Mode soirée : le minuteur
   --------------------------------------------------------------------------- */
.lu-soiree-minuteur { text-align: center; }
.lu-minuteur-etat {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-21);
    color: var(--lu-or);
    line-height: 1.2;
}
.lu-minuteur-temps {
    font-family: var(--lu-police-titre);
    font-size: clamp(2.75rem, 12vw, 4.5rem);
    line-height: 1;
    color: var(--lu-blanc);
    font-variant-numeric: tabular-nums;
    margin: var(--lu-e-2) 0;
    text-shadow: 0 0 32px rgba(240, 182, 43, 0.25);
}
.lu-minuteur-legende { font-size: var(--lu-t-14); color: var(--lu-gris); }

.lu-phases {
    list-style: none;
    display: flex;
    gap: var(--lu-e-2);
    margin-top: var(--lu-e-6);
    text-align: left;
}
.lu-phase {
    flex: 1;
    padding: var(--lu-e-3);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    transition: var(--lu-transition);
}
.lu-phase-heure {
    display: block;
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-12);
    color: var(--lu-cyan);
    font-variant-numeric: tabular-nums;
}
.lu-phase-titre { display: block; color: var(--lu-gris-clair); font-size: var(--lu-t-14); font-weight: 600; margin: 2px 0; }
.lu-phase-duree { display: block; color: var(--lu-gris); font-size: var(--lu-t-12); }
.lu-phase.passee { opacity: 0.45; }
.lu-phase.actuelle {
    background: linear-gradient(180deg, rgba(240, 182, 43, .14), transparent);
    border-color: var(--lu-or);
}
.lu-phase.actuelle .lu-phase-titre { color: var(--lu-or); }

/* ---------------------------------------------------------------------------
   Ordre de passage
   --------------------------------------------------------------------------- */
.lu-ordre { list-style: none; display: flex; flex-direction: column; }
.lu-ordre > li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-2) var(--lu-e-2);
    border-bottom: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
}
.lu-ordre > li:last-child { border-bottom: 0; }
.lu-ordre > li.moi {
    background: linear-gradient(90deg, rgba(240, 182, 43, .12), transparent 70%);
}
.lu-ordre > li.moi b { color: var(--lu-or); }
.lu-ordre-rang {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    color: var(--lu-gris);
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-12);
}
.lu-ordre > li.moi .lu-ordre-rang {
    background: var(--lu-degrade-or);
    border-color: transparent;
    color: var(--lu-sur-or);
}

/* ---------------------------------------------------------------------------
   Tables de jeu
   --------------------------------------------------------------------------- */
.lu-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: var(--lu-e-3);
}
.lu-table {
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
.lu-table.ma-table { border-color: var(--lu-or-profond); background: rgba(240, 182, 43, .06); }
.lu-table-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lu-e-2);
    margin-bottom: var(--lu-e-2);
    padding-bottom: var(--lu-e-2);
    border-bottom: 1px solid var(--lu-filet);
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-16);
    color: var(--lu-blanc);
}
.lu-table-titre span { font-family: var(--lu-police-texte); font-size: var(--lu-t-12); color: var(--lu-gris); font-weight: 500; }

@media (max-width: 768px) {
    .lu-phases { flex-direction: column; }
    .lu-reponse-presence > form,
    .lu-reponse-presence .btn { width: 100%; justify-content: center; }
    .lu-invite-actions { width: 100%; }
    .lu-invite-actions > form, .lu-invite-actions > .lu-replier { flex: 1; }
    .lu-invite-actions .btn { width: 100%; justify-content: center; }
    .lu-tables { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   PHASE 5 — LES MISSIONS DE LA MANCHE
   Le défi personnel est cyan (progression), l'objectif de club est doré
   (récompense) : la règle « l'or récompense, le cyan informe » tient ici.
   =========================================================================== */

.lu-missions { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-3); }

.lu-mission {
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
}
.lu-mission-faite { border-color: var(--lu-or-profond); background: rgba(240, 182, 43, .06); }

.lu-mission-emoji { flex: none; font-size: 1.35rem; line-height: 1.4; }

.lu-mission-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lu-e-2); }

.lu-mission-tete {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    flex-wrap: wrap;
}
.lu-mission-tete b { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-16); }

.lu-mission-consigne {
    margin: 0;
    color: var(--lu-gris-clair);
    font-size: var(--lu-t-14);
    max-width: 62ch;
}

.lu-mission-gain {
    flex: none;
    align-self: flex-start;
    padding: 2px var(--lu-e-2);
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-champ);
    border: 1px solid var(--lu-or-profond);
    color: var(--lu-or);
    font-size: var(--lu-t-12);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Déclarations : la file d'attente du maître du jeu, et l'effectif
   --------------------------------------------------------------------------- */
.lu-declarations { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.lu-declarations > li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    flex-wrap: wrap;
}
.lu-declaration-corps { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.lu-declaration-corps b { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-declaration-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Piocher une mission : les modèles prêts à jouer
   --------------------------------------------------------------------------- */
.lu-modeles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--lu-e-2); }
.lu-modeles > li { display: flex; }
.lu-modeles a {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    color: inherit;
    transition: var(--lu-transition);
}
.lu-modeles a:hover { border-color: var(--lu-cyan); background: rgba(0, 168, 240, .06); }
.lu-modeles a > i { flex: none; color: var(--lu-gris); align-self: center; }
.lu-modeles a:hover > i { color: var(--lu-cyan); }
.lu-modele-emoji { flex: none; font-size: 1.25rem; line-height: 1.3; }
.lu-modele-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lu-modele-corps b { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-modele-corps span { color: var(--lu-gris); font-size: var(--lu-t-12); }
.lu-modele-meta { color: var(--lu-or) !important; }

/* ---------------------------------------------------------------------------
   Choix de la portée : deux cartes cliquables plutôt qu'un menu déroulant
   --------------------------------------------------------------------------- */
.lu-choix-portee { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--lu-e-2); }
.lu-choix {
    display: flex;
    align-items: flex-start;
    gap: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    cursor: pointer;
    transition: var(--lu-transition);
}
.lu-choix:hover { border-color: var(--lu-cyan); }
.lu-choix:has(input:checked),
.lu-choix-actif { border-color: var(--lu-or-profond); background: rgba(240, 182, 43, .06); }
.lu-choix:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.lu-choix input { flex: none; margin-top: 3px; accent-color: var(--lu-or); }
.lu-choix-emoji { flex: none; font-size: 1.2rem; line-height: 1.3; }
.lu-choix-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lu-choix-corps b { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-choix-corps span { color: var(--lu-gris); font-size: var(--lu-t-12); }

@media (max-width: 768px) {
    .lu-mission { flex-wrap: wrap; }
    .lu-mission-gain { order: 3; }
    .lu-declaration-actions { width: 100%; }
    .lu-declaration-actions > form,
    .lu-declaration-actions > .lu-replier { flex: 1; }
    .lu-declaration-actions .btn { width: 100%; justify-content: center; }
    .lu-modeles { grid-template-columns: minmax(0, 1fr); }
    .lu-choix-portee { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   TABLEAU DE BORD DU CLUB (maître du jeu et architecte)
   L'or pour ce que le club a produit, le cyan pour ce qu'il faut lire :
   les compteurs sont dorés, les jauges de levier informent en cyan.
   =========================================================================== */

/* ---------- Le pouls : tuiles de compteurs ---------- */
.tb-pouls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--lu-e-2);
}
.tb-tuile {
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.4);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-carte);
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-2);
}
.tb-tuile-tete {
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    line-height: 1.3;
}
.tb-tuile-valeur {
    font-family: var(--lu-police-titre);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--lu-or);
    font-variant-numeric: tabular-nums;
}
.tb-tuile-valeur small {
    font-family: var(--lu-police-texte);
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    font-weight: 500;
}
.tb-tuile-pied {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lu-e-2);
    font-size: var(--lu-t-12);
    color: var(--lu-gris);
    font-variant-numeric: tabular-nums;
}
.tb-hausse { color: var(--lu-succes); font-weight: 600; }
.tb-baisse { color: var(--lu-erreur); font-weight: 600; }
.tb-plat   { color: var(--lu-gris); }

/* ---------- Les cinq leviers ---------- */
.tb-leviers { list-style: none; display: flex; flex-direction: column; gap: var(--lu-e-3); }
.tb-leviers > li {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
}
.tb-levier-emoji { flex: none; font-size: 1.2rem; line-height: 1; }
.tb-levier-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--lu-e-2); }
.tb-levier-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lu-e-2);
    font-size: var(--lu-t-14);
}
.tb-levier-tete b { color: var(--lu-blanc); font-weight: 600; }
.tb-levier-tete span { color: var(--lu-gris); font-size: var(--lu-t-12); font-variant-numeric: tabular-nums; }
.tb-levier-pct {
    flex: none;
    min-width: 48px;
    text-align: right;
    font-size: var(--lu-t-14);
    font-weight: 600;
    color: var(--lu-or);
    font-variant-numeric: tabular-nums;
}

/* ---------- Ce qui manque à un membre ---------- */
.tb-manques {
    list-style: none;
    margin: var(--lu-e-2) 0 0;
    padding-left: var(--lu-e-3);
    border-left: 2px solid var(--lu-or-profond);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tb-manques > li { color: var(--lu-gris-clair); font-size: var(--lu-t-12); }

/* ---------- Le tableau d'activité ---------- */
.tb-table td, .tb-table th { white-space: nowrap; }
.tb-num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-table small { color: var(--lu-gris); font-size: var(--lu-t-12); margin-left: 2px; }

.tb-membre { display: flex; align-items: center; gap: var(--lu-e-2); }
.tb-membre b { display: block; color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.tb-membre small { display: block; color: var(--lu-gris); font-size: var(--lu-t-12); margin: 0; }

/* Les cinq pastilles de signaux : allumée = accompli, éteinte = à faire */
.tb-signaux { display: inline-flex; gap: 4px; }
.tb-signal {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    font-size: 0.75rem;
    filter: grayscale(1);
    opacity: 0.4;
    cursor: help;
}
.tb-signal-ok {
    filter: none;
    opacity: 1;
    border-color: var(--lu-or-profond);
    background: rgba(240, 182, 43, .1);
}
.tb-jamais { color: var(--lu-erreur); font-weight: 600; }

@media (max-width: 768px) {
    .tb-pouls { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .tb-tuile-valeur { font-size: 1.25rem; }
    .tb-leviers > li { flex-wrap: wrap; }
    .tb-levier-corps { flex-basis: 100%; order: 3; }
}

/* ---------------------------------------------------------------------------
   Les quatre axes du joueur à l'honneur (HONNEUR_AXES)
   --------------------------------------------------------------------------- */
.lu-axes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--lu-e-2);
    margin-top: var(--lu-e-2);
}
.lu-axes > li { display: flex; align-items: flex-start; gap: var(--lu-e-2); }
.lu-axe-emoji { flex: none; font-size: 1.05rem; line-height: 1.3; }
.lu-axe-corps { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lu-axe-corps b { color: var(--lu-blanc); font-weight: 600; font-size: var(--lu-t-14); }
.lu-axe-corps span { color: var(--lu-gris); font-size: var(--lu-t-12); }

/* Les trois actions de l'encart « Prochaine réunion » du cockpit */
.lu-actions-reunion {
    display: flex;
    gap: var(--lu-e-2);
    margin-top: var(--lu-e-4);
    flex-wrap: wrap;
}
.lu-actions-reunion > form { flex: 1; min-width: 140px; }
.lu-actions-reunion .btn { width: 100%; justify-content: center; }

/* =============================================================================
   LA CARTE DE JOUEUR — chacun est un personnage
   Dix couleurs, dix motifs, choisis par le joueur. C'est le seul endroit où il
   sort de la charte : une guilde de cartes identiques serait un tableur.
   L'or et le cyan restent réservés au niveau et à l'XP — le joueur habille sa
   carte, il ne redéfinit pas les règles du jeu.
   ============================================================================= */

.lu-cj {
    --cj-teinte: var(--lu-or);
    --cj-sombre: var(--lu-or-profond);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(4,6,10,.92) 45%, var(--lu-nuit) 100%),
        var(--cj-sombre);
    border: 1px solid var(--cj-teinte);
    border-radius: 14px;
    overflow: hidden;
    color: var(--lu-gris-clair);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    transition: transform 220ms cubic-bezier(.2,0,0,1), box-shadow 220ms, border-color 220ms;
}
a.lu-cj:hover {
    transform: translateY(-4px);
    border-color: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.7), 0 0 0 1px var(--cj-teinte);
}
a.lu-cj:focus-visible { outline: 2px solid var(--lu-cyan); outline-offset: 3px; }

/* Le filet intérieur : ce qui fait « carte imprimée » plutôt que « div » */
.lu-cj::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid color-mix(in srgb, var(--cj-teinte) 35%, transparent);
    border-radius: 10px;
    pointer-events: none;
}

/* ---------- Le haut : motif, portrait, niveau ---------- */
.lu-cj-tete {
    position: relative;
    height: 150px;
    flex: none;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--cj-teinte) 34%, transparent) 0%,
        transparent 78%);
    border-bottom: 1px solid color-mix(in srgb, var(--cj-teinte) 40%, transparent);
}
.lu-cj-motif { position: absolute; inset: 0; opacity: .5; pointer-events: none; }

.lu-cj-portrait { position: relative; z-index: 1; }
.lu-cj-portrait .lu-portrait {
    width: 92px; height: 92px;
    border: 2px solid var(--cj-teinte);
    box-shadow: 0 0 0 4px rgba(4,6,10,.75), 0 6px 18px rgba(0,0,0,.6);
}
.lu-cj-portrait .lu-portrait-vide { font-size: 1.6rem; color: var(--cj-teinte); }

.lu-cj-niveau {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    min-width: 30px; height: 30px;
    display: grid; place-items: center;
    padding: 0 6px;
    border-radius: var(--lu-rayon-pilule);
    background: var(--lu-degrade-or);
    color: var(--lu-sur-or);
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-14);
    box-shadow: var(--lu-lueur-or);
}

/* ---------- Le corps ---------- */
.lu-cj-corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-2);
    padding: var(--lu-e-3) var(--lu-e-4) var(--lu-e-2);
    min-width: 0;
}
/* Le pseudo et le titre de niveau sont centrés : c'est le nom du personnage,
   il se lit comme un titre de carte, pas comme une ligne de formulaire. */
.lu-cj-nom {
    font-family: var(--lu-police-titre);
    font-size: var(--lu-t-18);
    line-height: 1.15;
    color: var(--lu-blanc);
    overflow-wrap: anywhere;
    text-align: center;
}
.lu-cj-titre-niveau {
    font-size: var(--lu-t-12);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cj-teinte);
    font-weight: 600;
    text-align: center;
    padding-bottom: var(--lu-e-2);
    border-bottom: 1px solid var(--lu-filet);
}

.lu-cj-pouvoir {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--lu-e-2);
    background: rgba(4, 6, 10, .55);
    border-left: 2px solid var(--cj-teinte);
    border-radius: var(--lu-rayon-net);
}
.lu-cj-etiquette {
    font-size: 0.625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lu-gris);
}
.lu-cj-pouvoir-texte { color: var(--lu-blanc); font-size: var(--lu-t-14); font-weight: 500; }

.lu-cj-citation {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--lu-t-12);
    font-style: italic;
    color: var(--lu-gris-clair);
    max-width: none;
}
.lu-cj-citation::before { content: "« "; color: var(--cj-teinte); }
.lu-cj-citation::after  { content: " »"; color: var(--cj-teinte); }

.lu-cj-entreprise {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: var(--lu-e-2);
    border-top: 1px solid var(--lu-filet);
}
.lu-cj-entreprise-nom { color: var(--lu-blanc); font-size: var(--lu-t-14); font-weight: 600; }
.lu-cj-entreprise-sous { color: var(--lu-gris); font-size: var(--lu-t-12); }
.lu-cj-manque { color: var(--lu-gris); font-style: italic; font-weight: 400; }

/* ---------- Le pied ---------- */
.lu-cj-pied {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lu-e-2);
    padding: var(--lu-e-2) var(--lu-e-4);
    background: rgba(0, 0, 0, .45);
    border-top: 1px solid color-mix(in srgb, var(--cj-teinte) 40%, transparent);
}
.lu-cj-xp { color: var(--lu-cyan); font-size: var(--lu-t-12); font-variant-numeric: tabular-nums; }
.lu-cj-xp b { font-size: var(--lu-t-14); font-weight: 700; }
/* Le vrai nom : présent, mais on ne le lit que si on le cherche. */
.lu-cj-vrainom {
    color: var(--lu-gris);
    font-size: 0.625rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Les dix couleurs ---------- */
.lu-cj-or       { --cj-teinte: #F0B62B; --cj-sombre: #2A2008; }
.lu-cj-cyan     { --cj-teinte: #00A8F0; --cj-sombre: #06202E; }
.lu-cj-pourpre  { --cj-teinte: #9B5DE5; --cj-sombre: #1D1030; }
.lu-cj-sang     { --cj-teinte: #E2483F; --cj-sombre: #2C0D0B; }
.lu-cj-foret    { --cj-teinte: #22C58B; --cj-sombre: #08251B; }
.lu-cj-braise   { --cj-teinte: #FF7A1A; --cj-sombre: #2E1405; }
.lu-cj-glace    { --cj-teinte: #8FD8FF; --cj-sombre: #122733; }
.lu-cj-rose     { --cj-teinte: #FF5FA2; --cj-sombre: #2E0E1D; }
.lu-cj-acier    { --cj-teinte: #9AA7B8; --cj-sombre: #1B2028; }
.lu-cj-obsidien { --cj-teinte: #5A6B8C; --cj-sombre: #10141C; }

/* ---------- Les dix motifs (CSS pur, aucune image) ---------- */
.lu-cjm-aucun .lu-cj-motif { background: none; }

.lu-cjm-runes .lu-cj-motif {
    background-image:
        repeating-linear-gradient(90deg, var(--cj-teinte) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(0deg, var(--cj-teinte) 0 1px, transparent 1px 26px);
    opacity: .18;
}
.lu-cjm-ecailles .lu-cj-motif {
    background-image: radial-gradient(circle at 50% 0, transparent 9px, var(--cj-teinte) 10px, transparent 11px);
    background-size: 22px 14px;
    opacity: .3;
}
.lu-cjm-grille .lu-cj-motif {
    background-image:
        repeating-linear-gradient(45deg,  var(--cj-teinte) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(-45deg, var(--cj-teinte) 0 1px, transparent 1px 14px);
    opacity: .22;
}
.lu-cjm-chevrons .lu-cj-motif {
    background-image:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--cj-teinte) 55%, transparent) 0 3px, transparent 3px 12px);
    opacity: .35;
}
.lu-cjm-etoiles .lu-cj-motif {
    background-image:
        radial-gradient(1.4px 1.4px at 18% 24%, #fff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 72% 16%, var(--cj-teinte) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 44% 62%, #fff 50%, transparent 51%),
        radial-gradient(1.8px 1.8px at 86% 68%, var(--cj-teinte) 50%, transparent 51%),
        radial-gradient(1.2px 1.2px at 28% 84%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 62% 40%, #fff 50%, transparent 51%);
    opacity: .8;
}
.lu-cjm-losanges .lu-cj-motif {
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--cj-teinte) 45%, transparent) 25%, transparent 25%),
        linear-gradient(225deg, color-mix(in srgb, var(--cj-teinte) 45%, transparent) 25%, transparent 25%),
        linear-gradient(315deg, color-mix(in srgb, var(--cj-teinte) 45%, transparent) 25%, transparent 25%),
        linear-gradient(45deg,  color-mix(in srgb, var(--cj-teinte) 45%, transparent) 25%, transparent 25%);
    background-size: 20px 20px;
    opacity: .3;
}
.lu-cjm-vagues .lu-cj-motif {
    background-image:
        radial-gradient(circle at 50% 100%, transparent 11px, var(--cj-teinte) 12px, transparent 13px);
    background-size: 26px 13px;
    opacity: .28;
}
.lu-cjm-circuit .lu-cj-motif {
    background-image:
        linear-gradient(90deg, var(--cj-teinte) 0 1px, transparent 1px 100%),
        linear-gradient(0deg,  var(--cj-teinte) 0 1px, transparent 1px 100%),
        radial-gradient(2.5px 2.5px at 0 0, var(--cj-teinte) 50%, transparent 51%);
    background-size: 34px 34px, 34px 34px, 34px 34px;
    opacity: .26;
}
.lu-cjm-halo .lu-cj-motif {
    background-image:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--cj-teinte) 70%, transparent) 0 1px, transparent 1px 100%),
        radial-gradient(circle at 50% 42%, transparent 0 38px, color-mix(in srgb, var(--cj-teinte) 45%, transparent) 38px 39px, transparent 39px),
        radial-gradient(circle at 50% 42%, transparent 0 56px, color-mix(in srgb, var(--cj-teinte) 30%, transparent) 56px 57px, transparent 57px);
    opacity: .7;
}

/* ---------- La guilde : la grille de cartes ---------- */
.lu-guilde {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--lu-e-4);
}
.lu-guilde > li { display: flex; }
.lu-guilde > li > .lu-cj { flex: 1; }

@media (max-width: 640px) {
    .lu-guilde { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--lu-e-3); }
    .lu-cj { min-height: 390px; }
    .lu-cj-tete { height: 132px; }
    .lu-cj-portrait .lu-portrait { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .lu-cj, a.lu-cj:hover { transition: none; transform: none; }
}

/* Utilitaire d'accessibilité : visible pour les lecteurs d'écran seulement */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lu-guilde-vide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   L'atelier de la carte : aperçu à gauche, nuancier à droite
   --------------------------------------------------------------------------- */
.lu-atelier-carte {
    display: grid;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
    gap: var(--lu-e-4);
    align-items: start;
}
.lu-atelier-apercu { position: sticky; top: var(--lu-e-4); }
.lu-atelier-apercu > .lu-vide-doux { margin-top: var(--lu-e-2); font-size: var(--lu-t-12); }
.lu-atelier-choix { display: flex; flex-direction: column; gap: var(--lu-e-4); }

.lu-nuancier {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: var(--lu-e-2);
}

.lu-nuance {
    --cj-teinte: var(--lu-or);
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    padding: 6px 8px;
    background: var(--lu-champ);
    border: 1px solid var(--lu-filet);
    border-radius: var(--lu-rayon-net);
    cursor: pointer;
    transition: var(--lu-transition);
    min-height: 44px;          /* cible tactile */
}
.lu-nuance:hover { border-color: var(--cj-teinte); }
.lu-nuance.actif {
    border-color: var(--cj-teinte);
    box-shadow: inset 0 0 0 1px var(--cj-teinte);
    background: rgba(255, 255, 255, .04);
}
.lu-nuance input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.lu-nuance:focus-within { outline: 2px solid var(--lu-cyan); outline-offset: 2px; }

.lu-nuance-pastille {
    position: relative;
    flex: none;
    width: 26px; height: 26px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--cj-teinte);
    background: linear-gradient(140deg, var(--cj-teinte) 0%, var(--cj-sombre, #111) 100%);
}
/* Sur une pastille de motif, on montre le motif — pas la couleur pleine */
.lu-nuance-motif .lu-nuance-pastille { background: var(--cj-sombre, #111); }
.lu-nuance-motif .lu-cj-motif { position: absolute; inset: 0; opacity: .85; }

.lu-nuance-nom {
    min-width: 0;
    color: var(--lu-gris-clair);
    font-size: var(--lu-t-12);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lu-nuance.actif .lu-nuance-nom { color: var(--lu-blanc); font-weight: 600; }

@media (max-width: 700px) {
    .lu-atelier-carte { grid-template-columns: minmax(0, 1fr); }
    .lu-atelier-apercu { position: static; max-width: 280px; margin: 0 auto; }
    .lu-nuancier { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* La carte détaillée reprend la couleur et le motif du joueur : même personne,
   même habillage que dans la guilde. Seuls le filet et l'entête sont teintés —
   le contenu garde la charte du club. */
.lu-carte.lu-teinte { border-color: color-mix(in srgb, var(--cj-teinte) 70%, transparent); }
.lu-carte.lu-teinte .lu-carte-tete {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--cj-teinte) 22%, transparent) 0%, transparent 72%);
    border-bottom: 1px solid color-mix(in srgb, var(--cj-teinte) 35%, transparent);
}
.lu-carte.lu-teinte .lu-carte-tete > *:not(.lu-cj-motif) { position: relative; z-index: 1; }
.lu-carte.lu-teinte .lu-cj-motif { opacity: .35; }
.lu-carte.lu-teinte .lu-portrait { border-color: var(--cj-teinte); }

/* ---------------------------------------------------------------------------
   La table de régie des rassemblements (centre de pilotage)
   --------------------------------------------------------------------------- */
.lu-regie td, .lu-regie th { vertical-align: middle; }
.lu-regie-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lu-regie-num small { color: var(--lu-gris); }

.lu-regie-quand { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.lu-regie-quand b { color: var(--lu-blanc); font-weight: 600; }
.lu-regie-quand span { color: var(--lu-gris); font-size: var(--lu-t-12); }

.lu-regie-titre { display: flex; flex-direction: column; gap: 1px; min-width: 180px; }
.lu-regie-titre b { color: var(--lu-blanc); font-weight: 600; }
.lu-regie-titre span { color: var(--lu-gris); font-size: var(--lu-t-12); }
.lu-regie-manque { color: var(--lu-gris); font-style: italic; font-size: var(--lu-t-12); }

.lu-regie-actions {
    display: flex;
    align-items: center;
    gap: var(--lu-e-2);
    flex-wrap: nowrap;
}
/* La prochaine manche se repère d'un coup d'œil dans la table */
.lu-regie-prochaine > td { background: rgba(240, 182, 43, .06); }
.lu-regie-prochaine > td:first-child { box-shadow: inset 3px 0 0 var(--lu-or); }

@media (max-width: 900px) {
    .lu-regie-actions { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Le joueur à l'honneur, dans l'encart du prochain rassemblement (QG)
   --------------------------------------------------------------------------- */
.lu-honneur-qg {
    margin-top: var(--lu-e-3);
    padding: var(--lu-e-3);
    background: rgba(4, 6, 10, 0.45);
    border: 1px solid var(--lu-filet);
    border-left: 2px solid var(--lu-or);
    border-radius: var(--lu-rayon-net);
    display: flex;
    flex-direction: column;
    gap: var(--lu-e-2);
}
.lu-honneur-etiquette {
    font-size: 0.625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lu-gris);
}
.lu-honneur-qui {
    display: flex;
    align-items: center;
    gap: var(--lu-e-3);
    color: inherit;
    min-width: 0;
}
.lu-honneur-qui:hover .lu-honneur-identite b { color: var(--lu-or-clair); }
.lu-honneur-identite { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lu-honneur-identite b {
    color: var(--lu-blanc);
    font-weight: 600;
    font-size: var(--lu-t-16);
    transition: var(--lu-transition);
}
.lu-honneur-identite span { color: var(--lu-gris); font-size: var(--lu-t-12); }
.lu-honneur-fil {
    margin: 0;
    color: var(--lu-or);
    font-size: var(--lu-t-14);
    font-style: italic;
    max-width: none;
}
.lu-honneur-qg .lu-vide-doux { margin: 0; }