/* =========================
   GLOBAL
========================= */

body{
font-family: Arial, Helvetica, sans-serif;
background:#f4f6f8;
margin:0;
}

.container{
max-width:1400px;
margin:auto;
padding:30px;
}

/* =========================
   TOP BAR
========================= */

.topbar{
display:flex;
align-items:center;
padding:20px 40px;
background:#0c4a8a;
color:white;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

.logo-area{
display:flex;
align-items:center;
gap:20px;
}

.logo{
height:60px;
background:white;
padding:6px 10px;
border-radius:6px;
}

/* =========================
   MENU NAVIGATION
========================= */

.menu{
display:flex;
align-items:center;
gap:25px;
margin-left:auto;
}

.menu a{
color:white;
text-decoration:none;
font-weight:600;
font-size:15px;
padding:6px 10px;
border-radius:4px;
}

.menu a:hover{
background:rgba(255,255,255,0.2);
}

.menu-button{
background:white;
color:#0c4a8a;
padding:6px 10px;
border-radius:6px;
font-weight:600;
}

.menu-import{
display:flex;
align-items:center;
gap:6px;
}

.menu-import input{
font-size:13px;
}

/* =========================
   TITRES SECTIONS
========================= */

h2{
margin-top:40px;
margin-bottom:15px;
}

/* =========================
   BOARD
========================= */

.board{
display:flex;
gap:25px;
margin-bottom:40px;
flex-wrap:wrap;
}

/* =========================
   COLUMN
========================= */

.column{
background:white;
width:230px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
overflow:hidden;
}

.column h3{
margin:0;
padding:10px;
font-size:14px;
color:white;
text-align:center;
}

/* =========================
   COULEURS CATEGORIES
========================= */

/* HOT */

.column.executif h3{
background:#00a8cc;
}

.column.pr h3{
background:#8aa9c0;
}

.column.implique h3{
background:#a7bf2e;
}

.column.staff h3{
background:#00c4b3;
}

/* AUTRES */

.column.recuperable h3{
background:#6fbf4a;
}

.column.investir h3{
background:#f2c94c;
color:black;
}

.column.rienafoutre h3{
background:#ff4d4d;
}

.column.pq h3{
background:#3f7fbf;
}

.column.lib h3{
background:#d62828;
}

.column.qs h3{
background:#ff7b00;
}

.column.perdu h3{
background:#666;
}

/* =========================
   LISTE MEMBRES
========================= */

.member-list{
list-style:none;
padding:10px;
min-height:220px;
margin:0;
}

/* =========================
   CARTE MEMBRE
========================= */

.member-list li{
background:#fafafa;
padding:10px;
margin-bottom:8px;
border-radius:6px;
border:1px solid #ddd;
cursor:default;
font-size:13px;
line-height:1.4;
transition:all 0.15s;
}

.member-list li:hover{
background:#f0f4ff;
border-color:#cfd8ff;
}

/* =========================
   INFOS MEMBRE
========================= */

.member-list strong{
font-size:13px;
}

.circo{
font-size:11px;
color:#666;
}

/* =========================
   TABLE
========================= */

table{
width:100%;
border-collapse:collapse;
background:white;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
border-radius:10px;
overflow:hidden;
}

thead{
background:#0c4a8a;
color:white;
}

th, td{
padding:10px;
text-align:left;
border-bottom:1px solid #eee;
font-size:14px;
}

tbody tr:hover{
background:#f5f5f5;
}

/* =========================
   BOUTONS
========================= */

button{
background:#0c4a8a;
color:white;
border:none;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
font-size:13px;
}

button:hover{
background:#083a6b;
}

/* =========================
   ACTIONS
========================= */

.actions{
margin-bottom:20px;
}

.actions button{
padding:10px 18px;
font-size:14px;
border-radius:6px;
border:none;
background:#0c4a8a;
color:white;
cursor:pointer;
}

.actions button:hover{
background:#093c6f;
}

/* =========================
   LIENS
========================= */

a{
color:#0c4a8a;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

.member-card{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}

.member-info{
font-size:12px;
}

.member-number{
color:#888;
font-size:11px;
}

.member-actions{
display:flex;
flex-direction:column;
gap:4px;
}

.member-actions select{
font-size:11px;
padding:2px;
}

.fb{
background:#1877f2;
}

.save{
background:#27ae60;
}