/* ==========================================================================
   SENTI-NODE — base.css
   Variables globales, reset, typographie, composants communs
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables CSS — design system SENTI-NODE
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs principales */
    --sn-bg:           #0a0e1a;
    --sn-bg-card:      #111827;
    --sn-bg-input:     #1c2333;
    --sn-border:       #1e2d45;

    --sn-cyan:         #00d4ff;
    --sn-green:        #00ff88;
    --sn-orange:       #ff6b00;
    --sn-red:          #ff003c;
    --sn-white:        #e8eaf6;
    --sn-muted:        #6b7a99;

    /* Typographie */
    --sn-font:         'Courier New', 'Consolas', monospace;
    --sn-font-size:    14px;
    --sn-line-height:  1.6;

    /* Espacements */
    --sn-space-xs:     4px;
    --sn-space-sm:     8px;
    --sn-space-md:     16px;
    --sn-space-lg:     24px;
    --sn-space-xl:     40px;

    /* Bordures */
    --sn-radius:       4px;
    --sn-radius-lg:    8px;

    /* Transitions */
    --sn-transition:   150ms ease;

    /* Z-index */
    --sn-z-nav:        100;
    --sn-z-panel:      200;
}

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

html {
    font-size: var(--sn-font-size);
    scroll-behavior: smooth;
}

body {
    font-family:      var(--sn-font);
    background-color: var(--sn-bg);
    color:            var(--sn-white);
    line-height:      var(--sn-line-height);
    min-height:       100vh;
}

a {
    color:           var(--sn-cyan);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre {
    font-family: var(--sn-font);
    background:  var(--sn-bg-input);
    padding:     2px 6px;
    border-radius: var(--sn-radius);
    font-size:   0.9em;
}

/* --------------------------------------------------------------------------
   Navigation globale
   -------------------------------------------------------------------------- */
.sn-nav {
    display:          flex;
    align-items:      center;
    gap:              var(--sn-space-lg);
    background:       var(--sn-bg-card);
    border-bottom:    1px solid var(--sn-border);
    padding:          var(--sn-space-sm) var(--sn-space-lg);
    position:         sticky;
    top:              0;
    z-index:          var(--sn-z-nav);
    height:           48px;
}

.sn-nav__brand {
    color:       var(--sn-cyan);
    font-weight: bold;
    font-size:   1.2em;
    letter-spacing: 2px;
}

.sn-nav__links {
    display:       flex;
    gap:           var(--sn-space-md);
    list-style:    none;
    margin-left:   var(--sn-space-lg);
}

.sn-nav__link {
    color:   var(--sn-muted);
    padding: var(--sn-space-xs) var(--sn-space-sm);
    border-radius: var(--sn-radius);
    transition: color var(--sn-transition), background var(--sn-transition);
}
.sn-nav__link:hover,
.sn-nav__link--active {
    color:      var(--sn-white);
    background: var(--sn-bg-input);
    text-decoration: none;
}

.sn-nav__spacer { flex: 1; }

.sn-nav__user {
    color:     var(--sn-muted);
    font-size: 0.85em;
}

/* Logout bouton dans nav */
.sn-nav__logout-form { display: inline; }
.sn-nav__logout {
    background:  none;
    border:      none;
    color:       var(--sn-red);
    cursor:      pointer;
    font-family: var(--sn-font);
    font-size:   0.85em;
    padding:     var(--sn-space-xs) var(--sn-space-sm);
}
.sn-nav__logout:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.sn-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--sn-space-xs);
    padding:       6px var(--sn-space-md);
    border:        1px solid var(--sn-border);
    border-radius: var(--sn-radius);
    background:    var(--sn-bg-input);
    color:         var(--sn-white);
    font-family:   var(--sn-font);
    font-size:     1em;
    cursor:        pointer;
    transition:    border-color var(--sn-transition), color var(--sn-transition);
}
.sn-btn:hover { border-color: var(--sn-cyan); color: var(--sn-cyan); }

.sn-btn--primary  { border-color: var(--sn-cyan);   color: var(--sn-cyan); }
.sn-btn--secondary{ border-color: var(--sn-muted);  color: var(--sn-muted); }
.sn-btn--danger   { border-color: var(--sn-red);    color: var(--sn-red); }
.sn-btn--warn     { border-color: var(--sn-orange);  color: var(--sn-orange); }
.sn-btn--ghost    { border-color: var(--sn-border);  color: var(--sn-muted); }
.sn-btn--ghost:hover { border-color: var(--sn-cyan); color: var(--sn-cyan); }
.sn-btn--sm       { padding: 3px var(--sn-space-sm); font-size: 0.85em; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.sn-form { display: flex; flex-direction: column; gap: var(--sn-space-md); }
.sn-form--inline { max-width: 480px; }

.sn-form__field { display: flex; flex-direction: column; gap: var(--sn-space-xs); }
.sn-form__field label { color: var(--sn-muted); font-size: 0.85em; }
.sn-form__field--checkbox { flex-direction: row; align-items: center; gap: var(--sn-space-sm); }

.sn-input,
.sn-select,
input[type="email"],
input[type="password"],
input[type="text"],
select {
    background:    var(--sn-bg-input);
    border:        1px solid var(--sn-border);
    border-radius: var(--sn-radius);
    color:         var(--sn-white);
    font-family:   var(--sn-font);
    font-size:     1em;
    padding:       6px var(--sn-space-sm);
    width:         100%;
    transition:    border-color var(--sn-transition);
}
.sn-input:focus,
input:focus,
select:focus {
    outline:      none;
    border-color: var(--sn-cyan);
}

/* --------------------------------------------------------------------------
   Alertes
   -------------------------------------------------------------------------- */
.sn-alert {
    padding:       var(--sn-space-sm) var(--sn-space-md);
    border-radius: var(--sn-radius);
    border-left:   3px solid;
}
.sn-alert--error   { border-color: var(--sn-red);   background: rgba(255,0,60,0.08);  color: var(--sn-red); }
.sn-alert--success { border-color: var(--sn-green);  background: rgba(0,255,136,0.08); color: var(--sn-green); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.sn-badge {
    display:       inline-block;
    padding:       1px 8px;
    border-radius: 99px;
    font-size:     0.78em;
    font-weight:   bold;
    letter-spacing: 1px;
}
.sn-badge--on  { background: rgba(0,255,136,0.15); color: var(--sn-green); }
.sn-badge--off { background: rgba(107,122,153,0.15); color: var(--sn-muted); }

/* --------------------------------------------------------------------------
   Page login
   -------------------------------------------------------------------------- */
.page-login {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
}

.sn-login-box {
    background:    var(--sn-bg-card);
    border:        1px solid var(--sn-border);
    border-radius: var(--sn-radius-lg);
    padding:       var(--sn-space-xl);
    width:         360px;
    display:       flex;
    flex-direction: column;
    gap:           var(--sn-space-md);
}

.sn-login-box__title {
    color:         var(--sn-cyan);
    letter-spacing: 4px;
    font-size:     1.5em;
    text-align:    center;
}

.sn-login-box__sub {
    color:     var(--sn-muted);
    font-size: 0.85em;
    text-align: center;
}

.sn-login-box__resend {
    color:     var(--sn-muted);
    font-size: 0.85em;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Page erreur
   -------------------------------------------------------------------------- */
.page-error {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
}

.sn-error-box {
    text-align: center;
}

.sn-error-box h1 {
    font-size: 6em;
    color:     var(--sn-red);
}

/* --------------------------------------------------------------------------
   Collapsibles (details/summary)
   -------------------------------------------------------------------------- */
.sn-collapsible {
    border:        1px solid var(--sn-border);
    border-radius: var(--sn-radius);
    padding:       var(--sn-space-md);
}

.sn-collapsible summary {
    cursor:      pointer;
    color:       var(--sn-white);
    font-weight: bold;
    margin-bottom: var(--sn-space-md);
}

.sn-collapsible summary:hover { color: var(--sn-cyan); }