/* Kanban Manager - Styles personnalisés */

/* Layout */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.kanban-colonne {
    grid-column: span 1;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
}

.kanban-colonne.sortable-chosen {
    box-shadow: 0 4px 12px rgba(72, 95, 199, 0.4);
    transform: scale(1.02);
    z-index: 100;
    border: 2px solid #485fc7;
}

.kanban-colonne.sortable-ghost {
    opacity: 0.6;
    background: #e8f4fd;
    border: 2px dashed #485fc7;
}

.kanban-colonne-header {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-colonne-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.kanban-colonne-actions {
    display: flex;
    gap: 0.25rem;
}

.kanban-colonne-actions .button {
    padding: 0.25rem 0.4rem;
}

.kanban-colonne-blocs {
    min-height: 100px;
    padding: 0.5rem;
}

.kanban-bloc {
    background: #485fc7;
    color: white;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    cursor: move;
}

.kanban-bloc-header {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kanban-bloc-content {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .85;
}

/* Tableau de bord */
.tableau-card {
    transition: transform 0.2s;
}

.tableau-card:hover {
    transform: translateY(-2px);
}

/* Notifications */
.notification {
    margin-bottom: 1rem;
}

/* Boutons */
.button {
    margin-bottom: 0.5rem;
}

/* Formulaires */
.box {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Navbar */
.navbar-item img {
    max-height: 2.5rem;
}

/* Dashboard cards */
.dashboard-stat-card {
    display: block;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    color: inherit;
}
.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    color: inherit;
}
.dashboard-org-card,
.dashboard-tableau-card {
    transition: box-shadow .15s;
}
.dashboard-org-card:hover,
.dashboard-tableau-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Séparateur lignes accès */
.access-row-border {
    border-bottom: 1px solid #f0f0f0;
}

/* Avatar membre */
.dashboard-member-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #485fc7;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Labels de section dans les dropdowns */
.navbar-section-label {
    font-size: .68rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4) !important;
    padding: .5rem 1rem .2rem !important;
    cursor: default;
    pointer-events: none;
}

/* Indicateur visuel sur les liens de menu admins */
.navbar-label-admin {
    border-bottom: 2px solid rgba(72,95,199,.6);
}
.navbar-label-superadmin {
    border-bottom: 2px solid rgba(241,70,104,.6);
}

/* Lien CTA visiteur dans la navbar */
.navbar-cta-link {
    font-weight: 600 !important;
    color: #fff !important;
    position: relative;
}
.navbar-cta-link::before {
    content: '';
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 6px;
    height: 1px;
    background: rgba(255,255,255,.25);
    transition: background .15s;
}
.navbar-cta-link:hover::before {
    background: rgba(255,255,255,.6);
}

/* Avatar initiale utilisateur */
.navbar-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.navbar.is-dark-navy {
    background-color: #1a2f5a;
}
.navbar.is-dark-navy .navbar-brand a.navbar-item,
.navbar.is-dark-navy .navbar-start .navbar-item,
.navbar.is-dark-navy .navbar-start .navbar-link,
.navbar.is-dark-navy .navbar-end .navbar-item,
.navbar.is-dark-navy .navbar-end .navbar-link {
    color: rgba(255,255,255,.85);
    background-color: transparent;
}
.navbar.is-dark-navy .navbar-brand a.navbar-item:hover,
.navbar.is-dark-navy .navbar-brand a.navbar-item:focus,
.navbar.is-dark-navy .navbar-start .navbar-item:hover,
.navbar.is-dark-navy .navbar-start .navbar-item:focus,
.navbar.is-dark-navy .navbar-start .navbar-link:hover,
.navbar.is-dark-navy .navbar-start .navbar-link:focus,
.navbar.is-dark-navy .navbar-end .navbar-item:hover,
.navbar.is-dark-navy .navbar-end .navbar-item:focus,
.navbar.is-dark-navy .navbar-end .navbar-link:hover,
.navbar.is-dark-navy .navbar-end .navbar-link:focus {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.navbar.is-dark-navy .navbar-link::after {
    border-color: rgba(255,255,255,.7);
}
.navbar.is-dark-navy .navbar-dropdown {
    background-color: #1a2f5a;
    border-top: 2px solid rgba(255,255,255,.15);
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.navbar.is-dark-navy .navbar-dropdown .navbar-item {
    color: rgba(255,255,255,.8);
    background-color: transparent;
}
.navbar.is-dark-navy .navbar-dropdown .navbar-item:hover,
.navbar.is-dark-navy .navbar-dropdown .navbar-item:focus {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.navbar.is-dark-navy .navbar-divider {
    background-color: rgba(255,255,255,.15);
}
.navbar.is-dark-navy .navbar-burger {
    color: #fff;
}
.navbar.is-dark-navy .navbar-burger span {
    background-color: #fff;
    height: 2px;
}
.navbar.is-dark-navy .navbar-burger:hover {
    background-color: rgba(255,255,255,.1);
}
.navbar.is-dark-navy .navbar-burger:hover span {
    background-color: #fff;
}
/* Mobile : forcer le fond navy sur toute la navbar ouverte */
@media screen and (max-width: 1023px) {
    .navbar.is-dark-navy,
    .navbar.is-dark-navy .navbar-brand,
    .navbar.is-dark-navy .navbar-menu,
    .navbar.is-dark-navy .navbar-menu.is-active {
        background-color: #1a2f5a !important;
    }

    /* Tous les items et liens dans le menu mobile */
    .navbar.is-dark-navy .navbar-menu .navbar-item,
    .navbar.is-dark-navy .navbar-menu .navbar-link,
    .navbar.is-dark-navy .navbar-menu .navbar-dropdown,
    .navbar.is-dark-navy .navbar-menu .navbar-start,
    .navbar.is-dark-navy .navbar-menu .navbar-end {
        background-color: #1a2f5a !important;
        color: rgba(255,255,255,.85) !important;
    }

    /* Hover */
    .navbar.is-dark-navy .navbar-menu .navbar-item:hover,
    .navbar.is-dark-navy .navbar-menu .navbar-item:focus,
    .navbar.is-dark-navy .navbar-menu .navbar-link:hover,
    .navbar.is-dark-navy .navbar-menu .navbar-link:focus {
        background-color: rgba(255,255,255,.1) !important;
        color: #fff !important;
    }

    /* La flèche du dropdown */
    .navbar.is-dark-navy .navbar-menu .navbar-link::after {
        border-color: rgba(255,255,255,.7) !important;
    }

    /* Séparateur */
    .navbar.is-dark-navy .navbar-menu .navbar-divider {
        background-color: rgba(255,255,255,.15) !important;
    }

    /* Exceptions : ne pas écraser les tags colorés et avatars */
    .navbar.is-dark-navy .navbar-menu .tag {
        color: initial !important;
    }
    .navbar.is-dark-navy .navbar-menu .navbar-user-avatar {
        background-color: unset !important;
        color: #fff !important;
    }
}

/* Responsive */
@media screen and (max-width: 768px) {
    .kanban-board {
        grid-template-columns: 1fr;
    }
    
    .columns.is-multiline {
        display: block;
    }
    
    .column {
        width: 100%;
    }
}

/* Fix pour les icônes dans les tags */
.tag i {
    margin-right: 0.25rem;
}

/* ============================================================
   COULEUR PRIMAIRE — Écrase le vert Bulma par le bleu LeanBoard
   ============================================================ */

/* Bouton is-primary */
.button.is-primary {
    background-color: #2563eb;
    border-color: transparent;
    color: #fff;
}
.button.is-primary:hover,
.button.is-primary.is-hovered {
    background-color: #1d4ed8;
    border-color: transparent;
    color: #fff;
}
.button.is-primary:active,
.button.is-primary.is-active,
.button.is-primary:focus,
.button.is-primary.is-focused {
    background-color: #1e40af;
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 0.125em rgba(37, 99, 235, 0.25);
}
.button.is-primary[disabled],
.button.is-primary.is-loading {
    background-color: #2563eb;
    border-color: transparent;
    opacity: 0.6;
}

/* Variante is-primary is-light */
.button.is-primary.is-light {
    background-color: #dbeafe;
    color: #1e40af;
    border-color: transparent;
}
.button.is-primary.is-light:hover,
.button.is-primary.is-light.is-hovered {
    background-color: #bfdbfe;
    color: #1e40af;
}

/* Variante is-primary is-outlined */
.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: #2563eb;
    color: #2563eb;
}
.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined.is-hovered {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* Tag is-primary */
.tag.is-primary:not(body) {
    background-color: #2563eb;
    color: #fff;
}
.tag.is-primary.is-light:not(body) {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Notification is-primary */
.notification.is-primary {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Lien is-primary dans le texte */
a.has-text-primary,
.has-text-primary {
    color: #2563eb !important;
}

/* is-success (vert) — remplace aussi par un bleu cohérent pour les boutons */
.button.is-success {
    background-color: #0ea5e9;
    border-color: transparent;
    color: #fff;
}
.button.is-success:hover,
.button.is-success.is-hovered {
    background-color: #0284c7;
    border-color: transparent;
    color: #fff;
}
.button.is-success:active,
.button.is-success.is-active,
.button.is-success:focus {
    background-color: #0369a1;
    border-color: transparent;
    color: #fff;
}
.button.is-success.is-light {
    background-color: #e0f2fe;
    color: #0369a1;
    border-color: transparent;
}
.button.is-success.is-light:hover {
    background-color: #bae6fd;
    color: #0369a1;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */

/* Hero */
.landing-hero {
    background: linear-gradient(135deg, #1a2f5a 0%, #0d1f3d 50%, #1a3a6b 100%);
    position: relative;
    overflow: hidden;
    padding: 5rem 1.5rem 4rem;
    color: #fff;
}
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(72, 133, 237, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(114, 75, 215, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.landing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-size: .8rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #a8c4f0;
    margin-bottom: 1.5rem;
}
.landing-hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.25rem;
}
.landing-hero-title span {
    background: linear-gradient(90deg, #4e9af1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,.7);
    max-width: 520px;
    line-height: 1.65;
    margin-bottom: 2.5rem;
}
.landing-btn-primary {
    background: linear-gradient(135deg, #4e9af1, #6366f1);
    color: #fff !important;
    border: none;
    padding: .85rem 2.2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.landing-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(78, 154, 241, .45);
}
.landing-btn-ghost {
    color: rgba(255,255,255,.75) !important;
    border: 1px solid rgba(255,255,255,.25);
    padding: .85rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: background .15s, color .15s;
}
.landing-btn-ghost:hover {
    background: rgba(255,255,255,.08);
    color: #fff !important;
}

/* Mockup kanban */
.landing-mockup {
    background: #1e2d4a;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
    padding: 1rem;
    max-width: 620px;
    margin: 0 auto;
}
.landing-mockup-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.landing-mockup-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
}
.landing-mockup-title-bar {
    flex: 1;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    height: 11px;
    margin: 0 .5rem;
}
.landing-mockup-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
}
.lm-col {
    background: rgba(255,255,255,.04);
    border-radius: 8px;
    padding: .5rem;
}
.lm-col-header {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.lm-card {
    background: rgba(255,255,255,.07);
    border-radius: 5px;
    padding: .45rem .5rem;
    margin-bottom: .4rem;
    font-size: .62rem;
    color: rgba(255,255,255,.7);
    line-height: 1.4;
    border-left: 3px solid;
}
.lm-badge {
    display: inline-block;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
    padding: .1rem .3rem;
    font-size: .55rem;
    color: rgba(255,255,255,.4);
    margin-top: .25rem;
}
.lm-avatar-row {
    display: flex;
    gap: 2px;
    margin-top: .3rem;
}
.lm-avatar {
    width: 14px; height: 14px;
    border-radius: 50%;
    font-size: .45rem;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
}

/* Stats */
.landing-stats {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}
.landing-stat-item {
    text-align: center;
}
.landing-stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.landing-stat-label {
    font-size: .75rem;
    color: rgba(255,255,255,.5);
    margin-top: .2rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Features */
.landing-features {
    padding: 5rem 1.5rem;
    background: #f8fafd;
}
.landing-section-tag {
    display: inline-block;
    background: #e8f0fe;
    color: #1a2f5a;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .3rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.landing-section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #1a2f5a;
    line-height: 1.2;
    margin-bottom: .75rem;
}
.landing-section-sub {
    color: #6b7280;
    font-size: 1.05rem;
    max-width: 540px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}
.landing-feature-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.75rem;
    border: 1px solid #e5e9f0;
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.landing-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 47, 90, .1);
}
.landing-feature-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
}
.landing-feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2f5a;
    margin-bottom: .5rem;
}
.landing-feature-desc {
    font-size: .9rem;
    color: #6b7280;
    line-height: 1.6;
}

/* How it works */
.landing-how {
    padding: 5rem 1.5rem;
    background: #fff;
}
.landing-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    position: relative;
}
.landing-step-num {
    width: 48px; height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a2f5a, #2d4f8a);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(26,47,90,.25);
}
.landing-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2f5a;
    margin-bottom: .35rem;
}
.landing-step-desc {
    font-size: .9rem;
    color: #6b7280;
    line-height: 1.6;
}
.landing-step-connector {
    width: 2px;
    background: linear-gradient(to bottom, #1a2f5a, transparent);
    height: 32px;
    margin: 4px 0 4px 23px;
    opacity: .2;
}

/* CTA */
.landing-cta {
    background: linear-gradient(135deg, #1a2f5a 0%, #0d1f3d 100%);
    padding: 5rem 1.5rem;
    text-align: center;
    color: #fff;
}
.landing-cta-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
}
.landing-cta-sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.65);
    margin-bottom: 2.5rem;
}

/* Roles section */
.landing-roles {
    padding: 5rem 1.5rem;
    background: #f8fafd;
}
.landing-role-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    border: 1px solid #e5e9f0;
    border-top: 4px solid;
    height: 100%;
}
.landing-role-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2f5a;
    margin: .75rem 0 .5rem;
}
.landing-role-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .875rem;
    color: #6b7280;
}
.landing-role-list li {
    padding: .3rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.landing-role-list li::before {
    content: '✓';
    color: #22c55e;
    font-weight: 700;
    flex-shrink: 0;
}