/* Coque de l'application : barre latérale, barre supérieure, menus, palette de commandes, pages de connexion. */

.skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 1000;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--weight-medium);
    transform: translateY(-200%);
    transition: transform var(--duration) var(--ease-out);
}

.skip-link:focus { transform: none; }

.shell {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    min-height: 100dvh;
    /* Fond et bordure de la barre latérale prolongés sur toute la hauteur de la page */
    background: linear-gradient(90deg,
        var(--color-surface) calc(var(--rail-width) - 1px),
        var(--color-border) calc(var(--rail-width) - 1px) var(--rail-width),
        transparent var(--rail-width));
}

.shell-main { display: flex; flex-direction: column; min-width: 0; }
.shell-content { flex: 1; min-width: 0; }
.shell-content:focus { box-shadow: none; }

/* ---------- Barre latérale : icônes seules, libellé en infobulle au survol ou au focus ---------- */

.rail {
    position: sticky;
    top: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    height: 100dvh;
    padding: var(--space-3) 0 var(--space-4);
}

.rail-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    transition: background var(--duration-fast) var(--ease-out);
}

.rail-brand:hover { background: var(--color-accent-soft); }

.rail-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rail-bottom { margin-top: auto; }

.rail-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    color: var(--color-text-subtle);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.rail-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }

/* La couleur tonique, utilisée rarement : la page où l'on se trouve. */
.rail-link.is-active { background: var(--color-tonic); color: var(--color-on-tonic); }
.rail-link.is-active:hover { background: var(--color-tonic); color: var(--color-on-tonic); }

.rail-label {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-toast-bg);
    color: var(--color-toast-fg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.rail-link:hover .rail-label,
.rail-link:focus-visible .rail-label {
    opacity: 1;
    transform: translate(0, -50%);
    transition-delay: 80ms;
}

/* ---------- Barre supérieure ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--topbar-height);
    padding: 0 var(--space-6) 0 var(--space-8);
    background: color-mix(in srgb, var(--color-bg) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(480px, 100%);
    height: var(--control-height);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-subtle);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.search-trigger:hover { border-color: var(--color-border-strong); }
.search-trigger-text { flex: 1; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; }

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

.simulation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.simulation-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning); }

/* ---------- Menus déroulants (<details data-menu>) ---------- */

.menu { position: relative; }

.menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-out);
}

.menu-trigger::-webkit-details-marker { display: none; }
.menu-trigger:hover,
.menu[open] > .menu-trigger { background: var(--color-surface-hover); color: var(--color-text); }

.team-switcher { padding: 0 var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface); }

.team-switcher-dots { display: inline-flex; }

.team-switcher-dots span {
    width: 8px;
    height: 8px;
    margin-left: -2px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.user-trigger { padding-left: 4px; }
.user-trigger-name { color: var(--color-text); }

.menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 70;
    min-width: 240px;
    padding: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: menu-in var(--duration) var(--ease-out);
}

.menu-panel-right { left: auto; right: 0; }
.menu-panel-wide { min-width: 300px; }

.menu-label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.menu-hint { padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); }

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-base);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.menu-item:hover { background: var(--color-surface-hover); text-decoration: none; }
.menu-item .icon { color: var(--color-text-subtle); }
.menu-item.is-selected { font-weight: var(--weight-medium); }
.menu-item-check { margin-left: auto; color: var(--color-accent) !important; }

.menu-separator { margin: var(--space-1) 0; }

.menu-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.menu-user-text { display: flex; flex-direction: column; min-width: 0; }
.menu-user-text span { font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }

.menu-switch {
    position: relative;
    width: 28px;
    height: 16px;
    margin-left: auto;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    transition: background var(--duration) var(--ease-out);
}

.menu-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration) var(--ease-out);
}

:root[data-theme="dark"] .menu-switch[data-for="theme"],
:root[data-density="compact"] .menu-switch[data-for="density"] { background: var(--color-accent); }

:root[data-theme="dark"] .menu-switch[data-for="theme"]::after,
:root[data-density="compact"] .menu-switch[data-for="density"]::after { transform: translateX(12px); }

@keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Palette de commandes ---------- */

.palette {
    width: min(calc(100vw - 32px), 620px);
    margin-top: 12vh;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.palette[open] { animation: palette-in var(--duration-slow) var(--ease-out); }
.palette::backdrop { background: var(--color-overlay); backdrop-filter: blur(2px); }

.palette-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-subtle);
}

.palette-input {
    flex: 1;
    height: 56px;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-lg);
}

.palette-input:focus { box-shadow: none; }
.palette-input::placeholder { color: var(--color-text-subtle); }

.palette-list { max-height: min(420px, 50vh); padding: var(--space-2); overflow-y: auto; }

.palette-group {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-subtle);
}

.palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.palette-item.is-active { background: var(--color-accent-soft); }

.palette-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.palette-item.is-active .palette-item-icon { background: var(--color-surface); color: var(--color-accent); }

.palette-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.palette-item-label { font-weight: var(--weight-medium); }
.palette-item-description { font-size: var(--text-xs); color: var(--color-text-muted); }
.palette-item-enter { transform: rotate(180deg) scaleY(-1); color: var(--color-accent); }

.palette-footer {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

@keyframes palette-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- Pages de connexion : tout tient dans la hauteur de l'écran, sans défilement ---------- */

.auth {
    display: grid;
    grid-template-columns: minmax(360px, 5fr) 7fr;
    height: 100dvh;
    overflow: hidden;
}

.auth-brand {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at -10% 110%, rgb(255 255 255 / 0.12), transparent 60%),
        radial-gradient(800px 500px at 120% -10%, rgb(255 255 255 / 0.10), transparent 60%),
        linear-gradient(160deg, var(--color-brand-1) 0%, var(--color-brand-2) 55%, var(--color-brand-3) 100%);
    color: var(--color-brand-text);
}

.auth-brand::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.12);
    box-shadow: 0 0 0 60px rgb(255 255 255 / 0.03), 0 0 0 130px rgb(255 255 255 / 0.02);
}

.auth-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: clamp(24px, 5vh, 48px) clamp(32px, 4vw, 56px);
}

.auth-logo { display: flex; align-items: center; gap: var(--space-3); color: #ffffff; }
.auth-wordmark { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }

.auth-tagline {
    max-width: 17ch;
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    font-weight: var(--weight-semibold);
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: #ffffff;
}

.auth-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    opacity: 0.88;
}

.auth-points li { display: flex; align-items: center; gap: var(--space-3); }
.auth-legal { font-size: var(--text-sm); opacity: 0.65; }

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: var(--space-6);
    overflow-y: auto; /* filet de sécurité pour les très petits écrans uniquement */
}

.auth-card { width: 100%; max-width: 400px; }

.login-header { margin-bottom: clamp(12px, 2.5vh, 24px); }
.account-pages .login-header h1 { font-size: var(--text-2xl); margin-bottom: var(--space-1); }
.account-pages .login-header h2 { margin: 0; font-size: var(--text-base); }

.login-form { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); }

.login-password-label { display: flex; align-items: baseline; justify-content: space-between; }
.login-link { font-size: var(--text-sm); }

.account-pages .login-remember {
    display: flex;
    align-items: center;
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.account-pages .login-footnote {
    margin: clamp(10px, 2vh, 20px) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    text-align: center;
}

.login-demo {
    margin-top: clamp(12px, 2.5vh, 24px);
    padding: var(--space-3);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.account-pages .login-demo h3 {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.account-pages .login-demo h3 span { text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); color: var(--color-text-subtle); }

.login-demo-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

.login-demo-account {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.login-demo-account:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }

.login-demo-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
    font-size: 9px;
    font-weight: var(--weight-semibold);
}

.login-demo-name { min-width: 0; font-size: var(--text-xs); font-weight: var(--weight-medium); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Autres pages de compte (double authentification, mot de passe oublié…) : alignées en haut */
.auth-main:not(:has(.login)) { align-items: flex-start; padding-top: clamp(24px, 10vh, 96px); }

/* ---------- Mon compte ---------- */

.manage-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-10); }
.manage-content { max-width: 640px; }

@media (max-width: 1100px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
}

@media (max-width: 900px) {
    .manage-layout { grid-template-columns: 1fr; gap: var(--space-6); }
    .topbar { padding: 0 var(--space-4); }
    .user-trigger-name, .team-switcher > span:not(.team-switcher-dots), .simulation-badge { display: none; }
}

.login-demo-list > form { min-width: 0; }

.team-switcher-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }

/* ---------- Mode hors connexion : coupure de réseau, notes en attente d'envoi ---------- */
.bandeau-reseau {
    position: fixed;
    left: 50%;
    bottom: var(--space-4);
    z-index: 2147483000;
    max-width: min(640px, calc(100vw - 2 * var(--space-4)));
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    box-shadow: var(--shadow-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: center;
}

.bandeau-lien { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-text); text-decoration: underline; }
#bandeau-attente { bottom: calc(var(--space-4) + 52px); }