/* ═══════════════════════════════════════════════════════════════════ */
/*   Quasar Dashboard — Styles specifiques                              */
/*   Depend de vnct-design-system.css (charge avant ce fichier)       */
/*   Aucune couleur en dur ici — tout vient du DS (alias ci-dessous)  */
/* ═══════════════════════════════════════════════════════════════════ */

/* ═══ Alias vers les tokens du design system ═══ */
/* Les pages du dashboard utilisent historiquement --bg-card et --border, qui
   n'existent pas dans vnct-design-system.css : les proprietes concernees etaient
   donc invalides et silencieusement ignorees (fonds et bordures manquants).
   On les definit ici comme de simples alias vers les tokens reels du DS. Comme
   ce sont des var() et non des valeurs en dur, ils suivent automatiquement les
   declinaisons dark et light declarees par le design system. */
:root {
    --bg-card: var(--bg-tertiary);
    --border: var(--border-default);
}

/* ═══ VNCT Animations (complements) ═══ */
@keyframes vnct-appear {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes vnct-appear-hero {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vnct-tile-enter {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vnct-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ═══ Quasar logo icon ═══ */
.quasar-logo-icon {
    height: 1.2em;
    width: 1.2em;
    object-fit: contain;
    -webkit-text-fill-color: initial;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   PAGE DE LOGIN                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--space-8);
    position: relative;
}

.landing-top {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
}

/* Brand — accent unique, plus de gradient */
.landing-logo {
    text-align: center;
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    letter-spacing: -2px;
    animation: vnct-appear-hero 650ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.landing-logo span {
    color: var(--accent);
}

.landing-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin-bottom: var(--space-10);
    font-weight: var(--font-light);
    animation: vnct-appear 550ms cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}

/* Bouton login — herite de .vnct-btn--primary (ajouter la classe dans le HTML) */
.landing-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-8);
    background: var(--accent);
    color: #000;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid var(--accent);
    cursor: pointer;
    text-decoration: none;
    animation: vnct-appear 550ms cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.landing-btn:hover {
    color: #000;
    text-decoration: none; /* Override a:hover du DS — un bouton-ancre ne doit jamais etre souligne */
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: var(--neon-shadow-md);
}

.landing-btn svg,
.landing-btn img {
    width: 20px;
    height: 20px;
}

/* Features cards sur la page login */
.landing-features {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-16);
    flex-wrap: wrap;
    justify-content: center;
}

.landing-feature {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    width: 200px;
    text-align: center;
    transition: all 0.3s ease;
}

.landing-feature:hover {
    border-color: var(--accent);
    box-shadow: var(--neon-shadow-sm);
    transform: translateY(-3px);
}

.landing-feature-icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.landing-feature-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
}

.landing-feature-desc {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-light);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   THEME TOGGLE                                                      */
/* ═══════════════════════════════════════════════════════════════════ */

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   BANNIERES                                                         */
/* ═══════════════════════════════════════════════════════════════════ */

/* Banniere d'indisponibilite */
.unavailable-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-8);
    background: hsla(35, 90%, 50%, 0.08);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    max-width: 480px;
    text-align: left;
}

.unavailable-banner .unavailable-icon {
    font-size: var(--text-lg);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.unavailable-banner strong {
    display: block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    color: var(--warning);
}

.unavailable-banner p {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-light);
    line-height: var(--leading-normal);
    margin: 0;
}

/* Banniere de mise a jour */
.update-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    margin: 0 var(--space-8) var(--space-6);
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.08);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    animation: vnct-appear 550ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.update-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: var(--radius-full);
    margin-left: var(--space-1);
    animation: vnct-status-pulse 2s ease-in-out infinite;
}

.update-banner-icon { font-size: var(--text-lg); flex-shrink: 0; }
.update-banner strong { font-size: var(--text-sm); color: var(--accent); }
.update-banner p { color: var(--text-secondary); font-size: var(--text-xs); margin: 0; }

/* Terminal de mise a jour */
.update-terminal {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: var(--text-xs);
    line-height: 1.6;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid var(--border-default);
    margin-top: var(--space-4);
}

.update-terminal .log-error { color: var(--danger); }
.update-terminal .log-status { color: var(--accent); font-weight: var(--font-semibold); }
.update-terminal .log-success { color: var(--success); font-weight: var(--font-semibold); }

/* ═══════════════════════════════════════════════════════════════════ */
/*   DASHBOARD LAYOUT                                                  */
/* ═══════════════════════════════════════════════════════════════════ */

.dashboard {
    display: flex;
    min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
    width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
}

.sidebar-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.sidebar-header-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Brand — accent unique */
.sidebar-brand {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.sidebar-brand span {
    color: var(--accent);
}

.sidebar-guild {
    margin-top: var(--space-3);
    margin-left: calc(-1 * var(--space-2));
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    max-width: calc(100% + var(--space-2));
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sidebar-guild:hover,
.sidebar-guild[aria-expanded="true"] {
    background: var(--bg-tertiary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.sidebar-guild-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-guild img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.sidebar-guild-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform .25s ease, opacity .25s ease;
}

.sidebar-guild:hover .sidebar-guild-chevron,
.sidebar-guild[aria-expanded="true"] .sidebar-guild-chevron {
    opacity: 1;
}

.sidebar-guild[aria-expanded="true"] .sidebar-guild-chevron {
    transform: rotate(180deg);
}

/* Server menu (popup) */
.server-menu[hidden] { display: none; }

.server-menu {
    position: absolute;
    top: 100%;
    left: var(--space-3);
    right: var(--space-3);
    margin-top: var(--space-2);
    z-index: 110;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevation-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: server-menu-appear 180ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes server-menu-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.server-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.server-menu-title {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.server-menu-refresh {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, background .2s ease;
}

.server-menu-refresh:hover {
    color: var(--accent);
    background: var(--bg-tertiary);
}

@keyframes server-menu-spin { to { transform: rotate(360deg); } }
.server-menu-refresh.is-spinning svg { animation: server-menu-spin .7s linear infinite; }

.server-menu-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.server-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    text-align: left;
    transition: background .2s ease;
}

.server-menu-item:hover { background: var(--bg-tertiary); }

.server-menu-item.is-current {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
    color: var(--accent);
}

.server-menu-item-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.server-menu-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-menu-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-menu-item-check { color: var(--accent); flex-shrink: 0; }

.server-menu-empty {
    padding: var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.server-menu-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: transparent;
    border: none;
    border-top: 1px solid var(--border-default);
    padding: var(--space-3);
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    font-family: inherit;
    transition: background .2s ease;
}

.server-menu-add:hover { background: var(--bg-tertiary); }

/* Onboarding screen (no guilds) */
.onboarding {
    max-width: 540px;
    margin: 4rem auto;
    padding: var(--space-8);
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    text-align: center;
}

.onboarding-icon {
    font-size: 2.75rem;
    margin-bottom: var(--space-4);
    line-height: 1;
}

.onboarding-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.onboarding-desc {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
}

.onboarding-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter .2s ease, transform .15s ease;
}

.onboarding-cta:hover { filter: brightness(0.92); }
.onboarding-cta:active { transform: scale(0.98); }

.onboarding-refresh {
    display: block;
    margin: var(--space-4) auto 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    font-family: inherit;
    padding: var(--space-2);
    transition: color .2s ease;
}

.onboarding-refresh:hover { color: var(--text-secondary); }
.onboarding-refresh.is-spinning::before {
    content: "↻";
    display: inline-block;
    margin-right: 4px;
    animation: server-menu-spin .7s linear infinite;
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-4) 0;
    overflow-y: auto;
}

.sidebar-section {
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* Rupture visuelle avant une section qui ne configure pas un serveur mais
   l'instance elle-meme (Systeme). Sans ce trait, elle se confond avec la liste
   des modules qui la precede, d'autant qu'elle defile desormais avec eux. */
.sidebar-section--sep {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.sidebar-link:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

/* Etat actif — accent rose unique + neon subtil */
.sidebar-link.active {
    color: var(--accent);
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    border-right: 3px solid var(--accent);
}

.sidebar-link-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.sidebar-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

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

.sidebar-user {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.sidebar-logout {
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    background: none;
    border: none;
}

.sidebar-logout:hover {
    color: var(--danger);
}

/* ─── Zone principale ─── */
.main {
    flex: 1;
    margin-left: 260px;
    padding: var(--space-8);
}

.main-header {
    margin-bottom: var(--space-8);
    animation: vnct-appear-hero 650ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.main-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-1);
}

.main-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-light);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   CARDS                                                             */
/* ═══════════════════════════════════════════════════════════════════ */

/* Card de contenu (modules) */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    transition: border-color 0.3s ease;
    animation: vnct-appear 550ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

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

.card-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-4);
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.card-title-row .card-title {
    margin-bottom: 0;
}

.card-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   TOGGLE SWITCH                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--surface-active);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--text-secondary);
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
}

.toggle input:checked + .toggle-slider {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
}

.toggle input:checked + .toggle-slider::before {
    background: var(--accent);
    transform: translateX(20px);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   SELECT & INPUT                                                    */
/* ═══════════════════════════════════════════════════════════════════ */

/* Select standard */
.select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.3s ease;
}

.select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    padding: var(--space-2);
}

.select:hover {
    border-color: var(--border-hover);
}

.select:focus {
    border-color: var(--accent);
    box-shadow: var(--neon-shadow-sm);
    outline: none;
}

/* Custom select (presence dropdowns) */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    outline: none;
}

.custom-select-trigger:hover {
    border-color: var(--border-hover);
}

.custom-select-trigger:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--neon-shadow-sm);
}

.custom-select.open .custom-select-trigger {
    border-color: var(--accent);
    box-shadow: var(--neon-shadow-sm);
}

.custom-select-chevron {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-select.open .custom-select-chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.custom-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1);
    z-index: 200;
    box-shadow: var(--shadow-elevation-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s;
    pointer-events: none;
}

.custom-select.open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.custom-select-option {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.custom-select-option:hover {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    color: var(--accent);
}

.custom-select-option.selected {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    color: var(--accent);
    font-weight: var(--font-medium);
}

/* Input standard */
.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    transition: all 0.3s ease;
}

.input:hover {
    border-color: var(--border-hover);
}

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

.input::placeholder {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   BOUTONS                                                           */
/* ═══════════════════════════════════════════════════════════════════ */

.btn {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-default);
    background: var(--bg-secondary);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.btn:hover {
    border-color: var(--border-hover);
    background: var(--surface-hover);
}

.btn:active {
    transform: scale(0.96);
}

/* Primary — fond accent, texte noir */
.btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent);
    filter: brightness(1.1);
    box-shadow: var(--neon-shadow-md);
}

.btn-primary:active {
    filter: brightness(0.95);
    transform: scale(0.96);
}

/* Secondary — contour accent (remplace btn-blue) */
.btn-blue,
.btn-secondary {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-blue:hover,
.btn-secondary:hover {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    box-shadow: var(--neon-shadow-sm);
}

.btn-blue:active,
.btn-secondary:active {
    transform: scale(0.96);
}

/* Ghost — remplace btn-gold (l'usage dore n'existe plus) */
.btn-gold {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

.btn-gold:hover {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    box-shadow: var(--neon-shadow-sm);
}

.btn-gold:active {
    transform: scale(0.96);
}

/* Danger */
.btn-danger {
    border-color: var(--danger);
    color: var(--danger);
    background: transparent;
}

.btn-danger:hover {
    background: hsla(0, 80%, 55%, 0.1);
    box-shadow: 0 0 8px hsla(0, 80%, 55%, 0.3);
}

/* Etat desactive — commun a toutes les variantes.
   Sans cette regle, un bouton `disabled` etait strictement indiscernable d'un
   bouton actif : meme fond, meme curseur, meme effet au survol. Cela concerne
   autant les boutons desactives par une regle metier (quota atteint) que ceux
   que withDebounce() neutralise le temps d'un enregistrement — on cliquait dans
   le vide sans comprendre pourquoi. Aucune teinte nouvelle : seulement une
   opacite reduite et la suppression des retours d'interaction. */
.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* Neutralisation du survol, variante par variante : chacune a son fond au repos,
   il faut le lui rendre plutot que d'en imposer un seul a toutes. */
.btn:disabled:hover { background: var(--bg-secondary); border-color: var(--border-default); }
.btn-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn-blue:disabled:hover,
.btn-secondary:disabled:hover,
.btn-gold:disabled:hover { background: transparent; border-color: var(--accent); }
.btn-danger:disabled:hover { background: transparent; border-color: var(--danger); }

.btn:disabled:hover,
.btn[disabled]:hover {
    filter: none;
    box-shadow: none;
}

.btn:disabled:active,
.btn[disabled]:active {
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   MODULES GRID (page d'accueil)                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.module-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    animation: vnct-tile-enter 550ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Animation en cascade */
.module-card:nth-child(1) { animation-delay: 0.1s; }
.module-card:nth-child(2) { animation-delay: 0.15s; }
.module-card:nth-child(3) { animation-delay: 0.2s; }
.module-card:nth-child(4) { animation-delay: 0.25s; }
.module-card:nth-child(5) { animation-delay: 0.3s; }
.module-card:nth-child(6) { animation-delay: 0.35s; }
.module-card:nth-child(7) { animation-delay: 0.4s; }
.module-card:nth-child(8) { animation-delay: 0.45s; }

/* Hover neon rose uniforme — plus d'alternance rose/bleu */
.module-card:hover {
    background: var(--surface-hover);
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--neon-shadow-md);
}

.module-card:active {
    transform: scale(0.97);
}

.module-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.module-card-icon { font-size: var(--text-xl); }
.module-card-title { font-weight: var(--font-semibold); font-size: var(--text-sm); }

.module-card-desc {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-light);
    line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   BADGES                                                            */
/* ═══════════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
}

.badge-active {
    background: hsla(140, 70%, 45%, 0.15);
    color: var(--success);
}

.badge-inactive {
    background: var(--surface-active);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   PRESENCE CARD                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.presence-card {
    animation-delay: 50ms;
}

.presence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr auto;
    gap: var(--space-4);
    align-items: end;
}

.presence-field {
    display: flex;
    flex-direction: column;
}

.presence-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    font-weight: var(--font-medium);
}

.presence-field-btn {
    padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   GRADIENT TEXT (legacy — conserve pour compatibilite)               */
/* ═══════════════════════════════════════════════════════════════════ */

.gradient-text {
    color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   MODAL                                                             */
/* ═══════════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--bg-secondary);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--neon-shadow-lg);
    animation: vnct-appear 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal h2 { font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
.modal p { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.modal .curious { color: var(--text-muted); font-size: var(--text-xs); font-style: italic; margin-top: var(--space-4); }
.modal .close-btn {
    margin-top: var(--space-6);
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   VERSION BADGE                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

#versionBadge {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-4) 0;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   MOBILE HEADER                                                     */
/* ═══════════════════════════════════════════════════════════════════ */

.mobile-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    margin-bottom: var(--space-2);
}

.mobile-header .sidebar-brand {
    font-size: 1.1rem;
}

/* Mobile back button */
.mobile-back {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
}

.mobile-back:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.mobile-back svg {
    width: 16px;
    height: 16px;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   RAPPELS PROGRAMMÉS — cartes de la liste                           */
/* ═══════════════════════════════════════════════════════════════════ */

.sched-item {
    padding: .85rem;
    margin-bottom: .6rem;
    background: var(--bg-card);
}

.sched-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sched-item-info {
    flex: 1;
    min-width: 0;
}

.sched-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.sched-meta {
    font-size: .78rem;
    color: var(--text-secondary);
    margin-top: .3rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.sched-next {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .2rem;
}

.sched-actions {
    display: flex;
    gap: .3rem;
    flex-shrink: 0;
}

.sched-actions .btn {
    padding: .3rem .55rem;
    font-size: .75rem;
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   MODÉRATION AUTOMATIQUE — barre d'onglets                          */
/*                                                                     */
/*   Quatre modules sous une seule entrée de sidebar. Aucune couleur en */
/*   dur : les tokens du design system portent déjà les déclinaisons    */
/*   sombre et claire, l'onglet actif se signale par l'accent.          */
/* ═══════════════════════════════════════════════════════════════════ */

.automod-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
}

.automod-tab {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.automod-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

.automod-tab.is-active {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

.automod-tab-loading {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   MARQUAGE BÊTA — modération automatique                            */
/*                                                                     */
/*   Deux repères pour une seule information : la pastille de la barre  */
/*   latérale, et le bandeau en haut de la page (le porteur principal). */
/*   AUCUN des deux ne dépend d'un survol : le survol n'existe pas au   */
/*   doigt, ni au clavier. Le texte est donc toujours écrit à l'écran ; */
/*   le `title` natif du HTML n'est qu'un confort de plus sur           */
/*   ordinateur, jamais le seul canal.                                  */
/*                                                                     */
/*   Zéro couleur en dur : --warning porte déjà ses déclinaisons sombre */
/*   et claire. Le fond du bandeau reste neutre et seul un filet à      */
/*   gauche est coloré — même parti pris que les toasts du design       */
/*   system. Le titre et le corps restent en texte standard : une bêta  */
/*   est un avertissement, pas une alarme, et le sens doit tenir sans   */
/*   la couleur.                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

/* Pastille de la barre latérale. Le mot « bêta » est écrit à côté du
   triangle : une icône seule ne porte jamais une information, et un
   triangle ne dit rien à qui ne le voit pas. `margin-left: auto` la cale
   au bout de l'entrée sans toucher à l'alignement du libellé ni à celui
   des autres entrées. */
.sidebar-badge-beta {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.05rem var(--space-2);
    border: 1px solid var(--warning);
    border-radius: var(--radius-full);
    /* Le MOT reste en texte courant, pas en --warning : en thème clair, l'orange
       du design system plafonne à ~3:1 sur fond blanc, insuffisant pour du texte
       de 11 px. La couleur d'avertissement porte le filet et le triangle (des
       graphiques, seuil 3:1), jamais le sens — qui tient dans le mot lui-même. */
    color: var(--text-secondary);
    /* Sous --text-xs : c'est un repère, il ne doit pas concurrencer le libellé. */
    font-size: 0.6875rem;
    font-weight: var(--font-medium);
    line-height: 1.6;
    white-space: nowrap;
}

.sidebar-badge-beta-icon {
    color: var(--warning);
}

/* Bandeau de la page. Rendu par le conteneur d'onglets, donc au-dessus de
   la barre d'onglets : il reste visible quel que soit l'onglet ouvert.

   Calibré serré A DESSEIN : ce bandeau pousse la barre d'onglets vers le bas,
   et à 375 px la version large (429 px de haut) la sortait du premier écran.
   Interligne resserré, titre collé à son paragraphe, un seul paragraphe. */
.automod-beta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
}

.automod-beta-icon {
    flex-shrink: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.automod-beta-body {
    /* Sans ça, un mot long (une URL collée un jour dans ce texte) pousserait
       le bandeau au-delà de la largeur de la page sur mobile. */
    min-width: 0;
}

.automod-beta-title {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.automod-beta p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-light);
    line-height: var(--leading-normal);
}

@media (max-width: 480px) {
    .automod-beta {
        padding: var(--space-3);
        gap: var(--space-2);
    }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   POP-UP DES NOUVEAUTÉS                                             */
/*                                                                     */
/*   Le conteneur est la modale du design system (.vnct-modal) : elle   */
/*   porte déjà le fond, la bordure accent, le défilement interne et    */
/*   l'adaptation mobile. Ce bloc ne fait que deux choses :             */
/*     1. élargir la modale pour ce contenu-là, plus dense qu'un        */
/*        message court (la modale du DS est calibrée à 500 px) ;       */
/*     2. redonner au markdown rendu la même hiérarchie que la page     */
/*        publique /nouveautes, dont les règles sont reprises ici à     */
/*        l'identique — même journal, même lecture.                     */
/*                                                                     */
/*   Aucune couleur en dur : tout vient des tokens, donc les thèmes     */
/*   sombre et clair suivent sans règle dédiée.                        */
/* ═══════════════════════════════════════════════════════════════════ */

/* :has() évite d'aller poser une classe sur un élément que le design system
   possède et réécrit à chaque ouverture. Sans support, la modale garde
   simplement sa largeur standard : le contenu reste lisible. */
.vnct-modal:has(.qnews) {
    max-width: 620px;
}

.qnews-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.qnews-entry {
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
}

/* Hiérarchie du markdown rendu :
     h2  = « 🌌 Quasar — v4.6.0 » (la version)  -> en-tête de carte, accent
     h3  = titre humain de la version           -> titre mis en avant
     > * = date en citation                     -> ligne muted discrète
     p>strong seul = libellé de section (✨/🔧) -> intertitre compact
     ul/li = les changements                    -> corps de texte */
.qnews-entry h2 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent);
    letter-spacing: var(--tracking-wide);
}

.qnews-entry h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-lg);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

/* La PREMIÈRE citation après le titre est la ligne de DATE : simple mention
   muted sans filet. Les autres gardent un filet accent discret. */
.qnews-entry blockquote {
    margin: var(--space-4) 0 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 2px solid var(--accent-dim);
}

.qnews-entry blockquote p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.qnews-entry h2 + blockquote,
.qnews-entry h3 + blockquote {
    margin: 0 0 var(--space-4);
    padding: 0;
    border-left: 0;
}

.qnews-entry h2 + blockquote p,
.qnews-entry h3 + blockquote p {
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.qnews-entry h2 + blockquote em,
.qnews-entry h3 + blockquote em {
    font-style: normal;
}

.qnews-entry p {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Libellés de section (« **✨ Nouveautés** » seuls dans leur paragraphe) :
   intertitres compacts. Sans :has(), dégradation propre en paragraphe. */
.qnews-entry p:has(> strong:only-child) {
    margin: var(--space-4) 0 var(--space-2);
}

.qnews-entry strong { color: var(--text-primary); }
.qnews-entry em { color: var(--text-muted); }
.qnews-entry a { color: var(--accent); }

.qnews-entry ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.2em;
}

.qnews-entry ul:last-child,
.qnews-entry p:last-child,
.qnews-entry blockquote:last-child { margin-bottom: 0; }

.qnews-entry li {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.qnews-entry li:last-child { margin-bottom: 0; }
.qnews-entry li::marker { color: var(--text-muted); }

/* Journal vide : encart sobre, bordure pointillée — même traitement que
   .quasar-news-empty sur la page publique. */
.qnews-empty {
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* Renvoi vers l'historique complet quand toutes les versions manquées ne
   tiennent pas dans le pop-up. */
.qnews-more {
    margin: var(--space-5) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

.qnews-more a { color: var(--accent); }

@media (max-width: 768px) {
    .qnews-entry { padding: var(--space-4) var(--space-3); }
    .qnews-entry h3 { font-size: var(--text-base); }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   RESPONSIVE                                                        */
/* ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); transition: all 0.3s ease; }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; padding: var(--space-5); }
    .landing-features { flex-direction: column; align-items: stretch; padding: 0; gap: var(--space-4); }
    .landing-feature { width: 100%; }
    .landing-top { position: absolute; top: var(--space-4); right: var(--space-4); }
    .landing { padding: var(--space-6); }
    .mobile-back { display: inline-flex; }
    .mobile-header { display: flex; }
    #versionBadge { margin-left: 0 !important; }

    .main-title { font-size: var(--text-xl); }
    .modules-grid { grid-template-columns: 1fr; }
    .card { padding: var(--space-4); }

    /* Welcome/Leave cote a cote → empile */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Embeds builder → empile */
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Presence grid responsive */
    .presence-grid {
        grid-template-columns: 1fr;
    }
    .presence-field-btn .btn {
        width: 100%;
    }

    /* Modal en bottom sheet */
    .modal-overlay {
        align-items: flex-end;
    }
    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
        /* Bordure accent + glow conserves sur mobile (regle DS) */
    }
}

@media (max-width: 480px) {
    .main { padding: var(--space-4); }
    .landing-logo { font-size: var(--text-2xl); }
    .landing-subtitle { font-size: var(--text-sm); }
    .landing-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); width: 100%; justify-content: center; }
    .landing-feature { padding: var(--space-4); }

    /* Empecher tout debordement horizontal */
    body, .main, .card, .dashboard {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Forcer les flex horizontaux en colonne sur mobile */
    [style*="display:flex"][style*="gap"] {
        flex-direction: column !important;
    }

    /* Retirer les max-width qui cassent le layout mobile */
    [style*="max-width:280px"],
    [style*="max-width:500px"],
    [style*="max-width:220px"],
    [style*="max-width:200px"] {
        max-width: 100% !important;
    }

    /* Retirer les width fixes sur les inputs inline */
    [style*="width:80px"],
    [style*="width:160px"] {
        width: 100% !important;
    }

    .select, .input, textarea.input {
        max-width: 100%;
        width: 100% !important;
    }

    .btn { width: 100%; text-align: center; }

    /* Rappels programmés : infos empilées, actions en barre horizontale tappable */
    .sched-item-row { flex-direction: column; align-items: stretch; gap: .75rem; }
    .sched-actions { width: 100%; gap: .5rem; }
    .sched-actions .btn { width: auto; flex: 1; padding: .55rem; font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   RÉSERVE DU BOUTON DRAPEAU FLOTTANT                                */
/*                                                                     */
/*   Le drapeau de signalement est en position: fixed en bas à droite.  */
/*   Sans cette réserve, il recouvre la dernière action d'une page      */
/*   longue — typiquement un « Enregistrer » en bas de formulaire.      */
/*                                                                     */
/*   Déclarée ICI, tout en bas de la feuille, ET PAS dans le bloc       */
/*   `.main` du haut : les media queries responsives redéfinissent      */
/*   `padding` en raccourci (768 px puis 480 px), ce qui réinitialise   */
/*   padding-bottom à chaque fois. Une règle unique en fin de fichier   */
/*   survit aux trois. Si `.main` gagne un jour un quatrième raccourci  */
/*   `padding`, il devra rester AVANT cette règle.                     */
/*                                                                     */
/*   44px = taille du bouton, var(--space-6) = son décalage bas,        */
/*   var(--space-4) = respiration, env() = barre d'accueil iOS.         */
/* ═══════════════════════════════════════════════════════════════════ */
.main {
    padding-bottom: calc(44px + var(--space-6) + var(--space-4) + env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════════════════ */
/*   BADGE DE VERSION — DÉCALAGE SOUS LE SHELL DU DASHBOARD            */
/*                                                                     */
/*   Le badge porte les mentions de licence AGPL (lien vers le code     */
/*   source de l'instance, hébergeur). Il est fixe en bas à gauche,     */
/*   en z-index 1 — donc SOUS la barre latérale, qui est fixe, large    */
/*   de 260px, à gauche, et en z-index 100. Sur app.html en desktop,    */
/*   il était purement et simplement recouvert : invisible.             */
/*                                                                     */
/*   On le décale de la largeur de la barre. `--vnct-badge-left` est lu */
/*   par vnct-fab-only.css pour `left` ET pour la largeur maximale, qui */
/*   réserve sa colonne au drapeau de signalement : une seule valeur à  */
/*   changer si la barre change de largeur.                            */
/*                                                                     */
/*   Sélecteur en frère général : le badge est ajouté au <body> par     */
/*   VNCT.VersionBadge, après .dashboard et après le drapeau. La page   */
/*   de connexion n'a pas de .dashboard, elle garde le retrait normal.  */
/* ═══════════════════════════════════════════════════════════════════ */
.dashboard ~ .vnct-version-badge {
    --vnct-badge-left: calc(260px + var(--space-3));
}

@media (max-width: 768px) {
    /* Barre latérale hors écran (translateX(-100%)) : plus rien à contourner. */
    .dashboard ~ .vnct-version-badge {
        --vnct-badge-left: var(--space-3);
    }
}