@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');
body {
	font-family: 'Inter', 'Montserrat', 'Segoe UI', Arial, sans-serif;
	background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 40%, #112d4e 100%);
	color: #e0e6ed;
	margin: 0;
}

header {
	background: linear-gradient(90deg, #0d1b2a 0%, #112d4e 60%, #1b76d2 100%);
	color: #fff;
	padding: 20px 38px 14px 38px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 4px 20px #00000066;
	border-bottom: 2px solid #1b76d2;
}

.navbar {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 18px;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.brand { display:flex; flex-direction:column; line-height:1.05; }
.brand-main { font-size:1.35em; font-weight:700; letter-spacing:.6px; color:#f5f9ff; text-shadow:0 2px 4px #0008; }
.brand-sub { font-size:1.15em; font-weight:600; letter-spacing:.6px; color:#dce6f2; margin-top:2px; }
.brand-logo { height:54px; border-radius:6px; box-shadow:0 4px 14px -4px #000a; }

.login-register, .admin-panel {
	background: #1b263b;
	padding: 36px 40px;
	border-radius: 18px;
	box-shadow: 0 6px 28px #00000055;
	max-width: 460px;
	margin: 56px auto;
	display: flex;
	flex-direction: column;
	gap: 26px;
	border: 1px solid #1b76d2;
}

/* HERO ACCUEIL */
.hero {
	max-width: 1250px;
	margin: 60px auto 40px auto;
	padding: 70px 70px 80px 70px;
	background: radial-gradient(circle at 30% 30%, #1b76d2 0%, #112d4e 55%, #0d1b2a 100%);
	border-radius: 34px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 18px 60px -15px #000000c0;
	border: 2px solid #1b76d2;
}
.hero:before, .hero:after {
	content: '';
	position: absolute;
	width: 380px;
	height: 380px;
	background: linear-gradient(140deg, #63adff33, #1b76d233);
	filter: blur(60px);
	border-radius: 50%;
	top: -140px;
	right: -140px;
	pointer-events: none;
}
.hero:after {
	top: auto;
	bottom: -150px;
	left: -150px;
	right: auto;
}
.hero h2 {
	margin: 0 0 18px 0;
	font-size: 2.8em;
	letter-spacing: 1px;
	color: #f5f9ff;
	text-shadow: 0 4px 18px #00000099;
}
.hero p.lead {
	font-size: 1.25em;
	line-height: 1.55em;
	max-width: 840px;
	margin: 0 0 34px 0;
	color: #c3d7e9;
}
.hero-actions {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.btn {
	display: inline-block;
	padding: 12px 24px;
	font-size: .95em;
	font-weight: 600;
	text-decoration: none;
	border-radius: 12px;
	background: linear-gradient(95deg, #1b76d2, #0d3766);
	color: #f5f9ff;
	box-shadow: 0 5px 20px -6px #00000088;
	letter-spacing: .5px;
	transition: background .3s, transform .2s, box-shadow .3s;
	border: 1px solid #1b76d2;
}
.btn:hover {
	background: linear-gradient(95deg, #63adff, #1b76d2);
	transform: translateY(-4px);
	box-shadow: 0 12px 34px -8px #000000aa;
}
.btn.secondary {
	background: linear-gradient(95deg, #112d4e, #0d1b2a);
	border: 1px solid #284b74;
}
.btn.secondary:hover { background: linear-gradient(95deg, #1b76d2, #112d4e); }

/* ARTICLES GRID */
.articles-section { max-width: 1250px; margin: 10px auto 90px auto; padding: 0 30px; }
.articles-section h3 { font-size: 1.9em; margin: 10px 0 26px 0; color: #79b8ff; letter-spacing: .5px; }
.articles-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.article-card {
	background: #1b263b;
	border: 1px solid #284b74;
	border-radius: 18px;
	padding: 20px 20px 70px 20px;
	position: relative;
	box-shadow: 0 8px 28px -6px #0000007d;
	display: flex; flex-direction: column; gap: 12px;
	transition: transform .25s, box-shadow .3s, border .25s;
	overflow: hidden;
}
.article-card:hover { transform: translateY(-6px); box-shadow: 0 16px 42px -8px #000000aa; border-color: #1b76d2; }
.article-card h4 { margin: 0; font-size: 1.25em; font-weight: 600; color: #f5f9ff; letter-spacing: .5px; }
.article-card p.desc { margin: 0; font-size: .9em; line-height: 1.4em; color: #c3d7e9; }
.article-card .meta { font-size: .75em; letter-spacing: .5px; text-transform: uppercase; color: #79b8ff; }
.article-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 20px #00000055; }
.article-card .price { font-size: 1.05em; font-weight: 600; color: #63adff; }
.article-card .card-footer { position: absolute; left: 0; bottom: 0; width: 100%; padding: 12px 20px; background: linear-gradient(135deg,#0d1b2a,#112d4e); display: flex; justify-content: space-between; align-items: center; }
.article-card .card-footer .btn-mini { font-size: .75em; padding: 7px 14px; border-radius: 8px; background: #1b76d2; color: #fff; text-decoration: none; border: none; cursor: pointer; transition: background .25s; }
.article-card .card-footer .btn-mini:hover { background: #63adff; }

/* FORM CREATION ARTICLE */
.article-create { max-width: 980px; margin: 40px auto 70px auto; background:#1b263b; padding: 34px 38px 42px 38px; border-radius: 26px; box-shadow: 0 12px 48px -10px #000000b5; border:1px solid #1b76d2; display:flex; flex-direction:column; gap:22px; }
.article-create h3 { margin:0 0 4px 0; font-size:1.5em; font-weight:600; color:#79b8ff; }
.article-create form { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.article-create form .full { grid-column:1/-1; }
.article-create input, .article-create select, .article-create textarea { padding:12px 14px; border-radius:12px; border:1px solid #284b74; background:#0d1b2a; color:#e0e6ed; font-size:.95em; resize:vertical; min-height:54px; }
.article-create textarea { min-height:120px; }
.article-create input:focus, .article-create select:focus, .article-create textarea:focus { outline:none; border:1.5px solid #1b76d2; background:#112d4e; }
.article-create button { padding:14px 26px; background:linear-gradient(95deg,#1b76d2,#0d3766); color:#f5f9ff; font-weight:600; font-size:1em; border:none; border-radius:14px; cursor:pointer; box-shadow:0 4px 18px #00000066; transition:background .3s, transform .2s; }
.article-create button:hover { background:linear-gradient(95deg,#63adff,#1b76d2); transform:translateY(-3px); }

/* UTILITAIRES */
.muted { color:#9db4c7; font-size:.85em; }
.center { text-align:center; }

/* Responsive additions */
@media (max-width: 1050px) {
	.hero { padding: 54px 44px 70px 44px; }
	.hero h2 { font-size: 2.3em; }
}
@media (max-width: 780px) {
	.hero { padding: 42px 34px 60px 34px; }
	.hero-actions { flex-direction: column; }
	.article-create form { grid-template-columns:1fr; }
}

.login-register h2, .admin-panel h2 {
	margin-top: 0;
	font-size: 1.4em;
	font-weight: 600;
	color: #79b8ff;
	letter-spacing: .5px;
}

.login-register form, .admin-panel form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.login-register input, .login-register button,
.admin-panel input, .admin-panel button,
select, textarea {
	padding: 12px;
	border-radius: 10px;
	border: 1px solid #284b74;
	font-size: 1em;
	background: #0d1b2a;
	color: #e0e6ed;
	transition: border 0.2s, background 0.2s;
}

.login-register input:focus, .admin-panel input:focus,
select:focus, textarea:focus {
	border: 1.5px solid #1b76d2;
	outline: none;
	background: #112d4e;
}

.login-register button, .admin-panel button {
	background: linear-gradient(100deg, #1b76d2 0%, #0d3766 100%);
	color: #f5f9ff;
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05em;
	box-shadow: 0 3px 10px #00000055;
	letter-spacing: .5px;
	transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
}
.login-register button:hover, .admin-panel button:hover {
	background: linear-gradient(100deg, #63adff 0%, #1b76d2 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px #00000066;
}

nav ul {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
nav a {
	color: #e0e6ed;
	text-decoration: none;
	font-weight: 500;
	font-size: .94em;
	padding: 8px 14px;
	border-radius: 10px;
	transition: background 0.25s, color 0.25s, box-shadow .25s;
    display:flex;
    align-items:center;
    gap:8px;
}
nav a:hover {
	background: #1b76d2;
	color: #f5f9ff;
	box-shadow:0 4px 14px -6px #000c;
}
nav a.active {
	background: linear-gradient(110deg,#1b76d2,#0d3766);
	color:#fff;
	box-shadow:0 6px 20px -8px #000c;
	font-weight:600;
}
/* Boutons navbar améliorés */
nav a {
	position:relative;
}
nav a:focus { outline:2px solid #63adff55; outline-offset:2px; }
nav a.active:after { content:''; position:absolute; left:14px; right:14px; bottom:4px; height:3px; background:#63adff; border-radius:2px; opacity:.85; }

/* Dropdown */
.dropdown { position:relative; }
.dropdown > a { display:flex; align-items:center; gap:6px; }
.dropdown-menu { position:absolute; top:100%; left:0; background:#0d1b2a; padding:8px 0; margin:6px 0 0 0; list-style:none; min-width:160px; border:1px solid #1b76d2; border-radius:10px; box-shadow:0 8px 26px -6px #000c; display:none; z-index:50; }
.dropdown-menu li { width:100%; }
.dropdown-menu a { display:block; padding:8px 14px; font-size:.85em; border-radius:0; }
.dropdown:hover > .dropdown-menu { display:block; }
.dropdown.active > a { background:linear-gradient(110deg,#1b76d2,#0d3766); }

/* Badge rôles */
.role-badge {
	display:inline-block;
	padding:6px 14px;
	border-radius:999px;
	font-size:.75em;
	font-weight:600;
	letter-spacing:.5px;
	background:#284b74;
	color:#e0e6ed;
	margin-right:12px;
	box-shadow:0 2px 10px -4px #000a;
	border:1px solid #1b76d2;
	backdrop-filter:blur(6px);
}
.badge-gérant { background:linear-gradient(90deg,#ffb347,#ff7b00); color:#222; border-color:#ff9a2a; }
.badge-co-gérant { background:linear-gradient(90deg,#ffd65b,#e0a800); color:#222; border-color:#e0b638; }
.badge-gestionnaire { background:linear-gradient(90deg,#56ccf2,#2f80ed); }
.badge-secrétaire { background:linear-gradient(90deg,#9b51e0,#5e34a6); }
.badge-agent-commercial { background:linear-gradient(90deg,#34d399,#059669); }
.badge-fabriquant-d-armes { background:linear-gradient(90deg,#ef4444,#b91c1c); }
.badge-partenaire { background:linear-gradient(90deg,#6366f1,#4338ca); }
.badge-fournisseur { background:linear-gradient(90deg,#f59e0b,#b45309); }
.badge-client { background:linear-gradient(90deg,#374151,#1f2937); color:#e5e7eb; border-color:#4b5563; }

.logout-btn { position:relative; }
.logout-btn:hover { box-shadow:0 4px 16px -6px #000c; }

.nav-right a {
	background: #0d3766;
	color: #d7e9ff;
	font-weight: 600;
	border-radius: 10px;
	padding: 8px 18px;
	box-shadow: 0 2px 12px -4px #00000066;
	transition: background 0.25s, color 0.25s, transform 0.15s;
	border: 1px solid #1b76d2;
	text-decoration: none;
}
.nav-right a:hover, .nav-right a.active {
	background: #1b76d2;
	color: #f5f9ff;
	transform: translateY(-2px);
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 24px;
	background: #1b263b;
	box-shadow: 0 4px 20px #00000055;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #284b74;
}
th, td {
	padding: 14px 12px;
	text-align: left;
	border-bottom: 1px solid #284b74;
}
th {
	background: #0d1b2a;
	font-weight: 600;
	color: #79b8ff;
}
tr:last-child td {
	border-bottom: none;
}

@media (max-width: 700px) {
	header {
		flex-direction: column;
		gap: 12px;
		padding: 20px 12px 16px 12px;
	}
	.login-register, .admin-panel {
		padding: 18px 8px;
		max-width: 98vw;
	}
	.hero { margin: 30px 10px 30px 10px; padding: 38px 26px 56px 26px; border-radius: 26px; }
	.hero h2 { font-size: 2em; }
	.brand-main { font-size:1.25em; }
	.brand-sub { font-size:1.05em; }
	nav ul { gap: 8px; }
	.nav-right a { padding: 8px 12px; }
}