.home {
		max-width: 1100px;
		margin: auto;
		padding: 0 20px;
	}

/* HERO */
	.hero {
		text-align: center;
		margin-bottom: 30px;
	}

	.hero h1 {
		font-size: 40px;
		color: #4cc9f0;
	}

	.hero p {
		color: #cfd6e1;
		margin: 10px 0 20px;
	}

	.hero-actions a {
		display: inline-block;
		margin: 5px;
		padding: 7px 16px;
		border-radius: 6px;
		border: 1px solid rgba(255,255,255,0.2);
		color: #fff;
		text-decoration: none;
	}

	.hero-actions a:hover {background: rgba(255,255,255,0.1);}

/* LAYOUT */
	.home-main {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 40px;
	}

/* CONTENT */
	.main-content h2 {margin-bottom: 20px;}

/* POST LIST */
	.post-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.post-item {
		background: rgba(255,255,255,0.05);
		padding: 18px;
		border-radius: 12px;
		transition: 0.3s;
		position: relative;
		overflow: hidden;
	}

	.post-item:hover {background: rgba(255,255,255,0.08);}

	.post-item h3 {margin: 8px 0;}

	.post-item p {
		font-size: 13px;
		color: #cfd6e1;
	}
	
	.post-list a {
	    color: #cfd6e1;
		text-decoration: none;
	}

/* BADGE (Apple style) */
	.badge {
		font-size: 11px;
		padding: 3px 10px;
		border-radius: 20px;
		border: 1px solid rgba(255,255,255,0.2);
		color: #ddd;
		float: right;
		margin: -2px 75px 0 0;
	}
	
	.badge.arti {
		background: rgba(56, 189, 248, 0.15);
		color: #38bdf8;
		border: 1px solid rgba(56, 189, 248, 0.4);
		box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
	}
	
	.badge.tuto {
		background: rgba(168, 85, 247, 0.15);
		color: #a855f7;
		border: 1px solid rgba(168, 85, 247, 0.4);
		box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
	}
	
/* RUBANS */
	.ribbon {
		position: absolute;
		top: 20px;
		right: -26px;
		transform: rotate(45deg);
		padding: 3px 30px;
		font-size: 10px;
		font-weight: 200;
		letter-spacing: 0.8px;
		color: rgba(255,255,255,0.95);
		background: linear-gradient(
			135deg,
			rgba(255,255,255,0.18),
			rgba(255,255,255,0.35)
		);
		backdrop-filter: blur(6px);
		border: 1px solid rgba(255,255,255,0.12);
		box-shadow: 0 6px 12px rgba(0,0,0,0.35);
	}

/* SIDEBAR */
	.sidebar {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-top: 30px;
	}

	.side-block {
		background: rgba(255,255,255,0.05);
		padding: 20px;
		border-radius: 12px;
	}

	.side-block h3 {
		margin-bottom: 10px;
	}

	.side-block a {
		display: block;
		color: #cfd6e1;
		text-decoration: none;
		margin: 6px 0;
	}

	.side-block a:hover {
		color: #fff;
	}

/* RESPONSIVE */
	@media (max-width: 900px) {
		.home-main {
			grid-template-columns: 1fr;
		}
	}