/* ============================================================
   msp-membre.css — Styles pages login + espace membre
   ============================================================ */

/* ── Alertes ── */
.msp-alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}
.msp-alert-error   { background: #fde8e8; color: #c0392b; border-left: 4px solid #c0392b; }
.msp-alert-success { background: #e8f8e8; color: #27ae60; border-left: 4px solid #27ae60; }

/* ── Formulaires ── */
.msp-form { display: flex; flex-direction: column; gap: 16px; }
.msp-form-group { display: flex; flex-direction: column; gap: 6px; }
.msp-form-group label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.msp-form-group input,
.msp-input {
    padding: 10px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-family: var(--font-body);
    transition: border-color var(--transition);
    width: 100%;
}
.msp-form-group input:focus,
.msp-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(126,190,197,0.2);
}
.msp-btn-full { width: 100%; text-align: center; padding: 12px; font-size: 1rem; }

/* ── Page login ── */
.msp-auth-section {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-light);
    padding: 40px 24px;
}
.msp-auth-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
}
.msp-auth-logo { text-align: center; margin-bottom: 28px; }
.msp-auth-logo img { height: 36px; margin: 0 auto; }
.msp-auth-card h1 {
    font-family: var(--font-title);
    font-size: 1.6rem;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 6px;
}
.msp-auth-subtitle { text-align: center; color: #888; font-size: 0.9rem; margin-bottom: 28px; }
.msp-auth-links { text-align: center; margin-top: 20px; font-size: 0.85rem; color: #888; }
.msp-auth-links a { color: var(--color-primary); font-weight: 600; }

/* ── Page home-membre ── */
.msp-membre-page {
    padding: 48px 24px;
    min-height: calc(100vh - var(--header-height));
}
.msp-membre-header { margin-bottom: 32px; }
.msp-membre-header h1 {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--color-primary);
}
.msp-membre-sub { color: #888; margin-top: 4px; }

/* Cards section */
.msp-card {
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 32px;
    margin-bottom: 28px;
}
.msp-card h2 {
    font-family: var(--font-title);
    font-size: 1.2rem;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.msp-section-hint { font-size: 0.85rem; color: #999; margin-bottom: 20px; }

/* Formulaire ajout projet */
.msp-form-inline {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.msp-form-inline .msp-input { flex: 1; min-width: 220px; }

/* ── Liste projets (layout colonne) ─────────────────────────── */
.msp-proj-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Ligne projet */
.msp-proj-row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    align-items: center;
    gap: 20px;
    border: 1.5px solid var(--color-border);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 16px 20px;
    transition: box-shadow var(--transition);
    background: #fff;
}
.msp-proj-row:hover     { box-shadow: 0 3px 12px rgba(0,0,0,0.09); }
.msp-proj-row.active    { border-left-color: #27ae60; }
.msp-proj-row.inactive  { border-left-color: #ccc; opacity: 0.8; }

/* Colonne identité */
.msp-proj-row__identity { min-width: 0; }
.msp-proj-row__identity h3 {
    font-size: 1rem;
    color: var(--color-primary);
    margin: 6px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge statut */
.msp-proj-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.active  .msp-proj-badge { background: #e8f8e8; color: #27ae60; }
.inactive .msp-proj-badge { background: #f0f0f0; color: #999; }

.msp-proj-ref  { font-size: 0.78rem; color: #bbb; margin: 0; font-family: monospace; }
.msp-proj-meta { font-size: 0.78rem; color: #aaa; margin: 4px 0 0; }

/* Colonne statistiques */
.msp-proj-row__stats {
    display : block;
    width   : 100%;
}

/* Bloc statistiques — style Timeline */
.msp-stats-block {
    background    : var(--color-light, #f5f7fa);
    border-radius : 10px;
    padding       : 8px 14px 10px;
}
.msp-stats-block__title {
    font-size      : .6rem;
    font-weight    : 700;
    color          : #aaa;
    text-transform : uppercase;
    letter-spacing : .8px;
    text-align     : center;
    margin-bottom  : 6px;
}
.msp-stats-block__row {
    display     : flex;
    align-items : center;
    gap         : 6px;
    flex-wrap   : nowrap;
}

.msp-stats-block .stat-card {
    background    : #fff;
    border-radius : 8px;
    padding       : 3px 10px;
    text-align    : center;
    min-width     : 52px;
}
.msp-stats-block .stat-card .num {
    font-size   : 1rem;
    font-weight : 700;
    line-height : 1.2;
}
.msp-stats-block .stat-card .lbl {
    font-size      : .6rem;
    color          : #888;
    text-transform : uppercase;
    letter-spacing : .4px;
}

/* Barre de progression */
.msp-stats-block .progress-bar {
    flex        : 1;
    min-width   : 120px;
    display     : flex;
    align-items : center;
    gap         : 8px;
}
.msp-stats-block .progress-bar .bar-bg {
    flex          : 1;
    background    : #e0e6ef;
    border-radius : 99px;
    height        : 6px;
    overflow      : hidden;
}
.msp-stats-block .progress-bar .bar-fill {
    background    : #1d9e75;
    height        : 100%;
    border-radius : 99px;
    transition    : width .5s ease;
}
.msp-stats-block .progress-bar .bar-label {
    font-size   : .75rem;
    color       : #555;
    white-space : nowrap;
}

/* Colonne actions */
.msp-proj-row__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.msp-proj-row__actions .msp-btn,
.msp-proj-row__actions .msp-btn-danger-sm {
    text-align: center;
    white-space: nowrap;
}

/* Responsive : empiler sur mobile uniquement */
@media (max-width: 760px) {
    .msp-proj-row {
        grid-template-columns: 1fr;
    }
    .msp-proj-row__stats { flex-wrap: wrap; gap: 8px; }
    .msp-stats-block__row { flex-wrap: wrap; }
    .msp-stats-block .progress-bar { flex: 1 1 100%; }
    /* Boutons d'action sur plusieurs lignes : nowrap les alignait sur une
       seule ligne, deux fois plus large que l'écran */
    .msp-proj-row__actions { flex-direction: row; flex-wrap: wrap; }
    .msp-proj-row__actions form { display: contents; }
}

/* Conserver la grille pour compatibilité (pages autres) */
.msp-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.msp-proj-card {
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    position: relative;
    transition: box-shadow var(--transition);
}
.msp-proj-card:hover    { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.msp-proj-card.active   { border-color: #27ae60; }
.msp-proj-card.inactive { border-color: #e0e0e0; opacity: 0.75; }

.msp-proj-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.msp-btn-outline-dark {
    display: inline-block;
    padding: 8px 16px;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary) !important;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    transition: all var(--transition);
}
.msp-btn-outline-dark:hover { background: var(--color-primary); color: white !important; }
.msp-btn-sm {
    padding     : 7px 14px;
    font-size   : 12px;
    font-weight : 600;
}
.msp-btn-danger-sm {
    padding: 7px 14px;
    background: transparent;
    border: 1.5px solid #e74c3c;
    color: #e74c3c;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.msp-btn-danger-sm:hover { background: #e74c3c; color: white; }

/* État vide */
.msp-empty-state { text-align: center; padding: 60px 32px; }
.msp-empty-icon { font-size: 3rem; margin-bottom: 16px; }
.msp-empty-state h2 { color: var(--color-primary); margin-bottom: 10px; }
.msp-empty-state p  { color: #888; line-height: 1.8; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .msp-auth-card { padding: 32px 24px; }
    .msp-form-inline { flex-direction: column; }
    .msp-form-inline .msp-input { width: 100%; }
}