/* ===========================
   ARTICLE – INFOSTEPH V2
   =========================== */
	.article {position: relative;}

	.article .type-banner {
		position: absolute;
		top: 20px;
		right: 20px;
		margin: 0;
		padding: 6px 12px;
		font-size: 12px;
		font-weight: 600;
		border-radius: 999px;
		border-left: none;
		backdrop-filter: blur(6px);
	}

	.article .type-article {
		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);
	}

	.article .type-tutoriel {
		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);
	}

	.article {
		max-width: 900px;
		margin: 0 auto;
		padding: 40px;
		background: rgba(255,255,255,0.05);
		border: 1px solid rgba(255,255,255,0.08);
		border-radius: 16px;
		backdrop-filter: blur(10px);
		color: #e5e7eb;
		font-family: 'Inter', sans-serif;
		line-height: 1.75;
	}

/* ===========================
   HEADER
   =========================== */

	.article h1 {
		font-size: 2.4rem;
		font-weight: 600;
		margin-bottom: 10px;
		color: #fff;
	}

	.article .date {
		font-size: 0.85rem;
		color: #9ca3af;
		margin-bottom: 30px;
	}

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

	.article h2 {
		margin-top: 40px;
		margin-bottom: 10px;
		font-size: 1.5rem;
		font-weight: 600;
		color: #f87171;
		border-left: 3px solid #f87171;
		padding-left: 10px;
	}

	.article h3 {
		margin-top: 25px;
		font-size: 1.3rem;
		color: #38bdf8;
	}

	.article h4 {
		margin-top: 20px;
		font-size: 1.1rem;
		color: #c084fc;
	}


/* ===========================
   TEXTE
   =========================== */

	.article p {
		margin-bottom: 18px;
		color: #d1d5db;
	}

/* ===========================
   LISTES
   =========================== */

	.article ul,
	.article ol {margin: 20px 0 20px 25px;}

	.article li {margin-bottom: 8px;}

	.article ul li::marker {color: #38bdf8;}

/* ===========================
   LIENS (style moderne)
   =========================== */

	.article a {
		color: #cbd5e1;
		background: rgba(255,255,255,0.05);
		padding: 2px 6px;
		border-radius: 6px;
		text-decoration: none;
		transition: 0.25s;
	}

	.article a:hover {
		background: rgba(96,165,250,0.2);
		color: #fff;
	}

/* ===========================
   IMAGE
   =========================== */

	.article img {
		max-width: 100%;
		border-radius: 12px;
		margin: 25px auto;
		display: block;
		box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	}

	/* IMAGE FLOTTANTE (comme ton exemple) */
	.article .imgSom {
		float: right;
		width: 280px;
		margin: 0 0 20px 30px;
	}

/* ===========================
   CODE
   =========================== */

	.article pre {
		margin: 30px 0;
		border-radius: 12px;
		overflow: hidden;
	}

/* ===========================
   QUOTE
   =========================== */

	.article blockquote {
		border-left: 3px solid #38bdf8;
		padding-left: 15px;
		color: #9ca3af;
		font-style: italic;
		margin: 25px 0;
	}

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

	.article table {
		width: 100%;
		margin: 30px 0;
		border-collapse: collapse;
	}

	.article th,
	.article td {
		padding: 10px;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}

	.article th {
		color: #fff;
		text-align: left;
	}

/* ===========================
   HR
   =========================== */

	.article hr {
		border: none;
		height: 1px;
		background: rgba(255,255,255,0.1);
		margin: 40px 0;
	}

/* ===========================
   FOOTER
   =========================== */

	.article .footer {
		margin-top: 40px;
		padding-top: 20px;
		border-top: 1px solid rgba(255,255,255,0.08);
		font-size: 0.8rem;
		color: #9ca3af;
	}

/* ===========================
   RESPONSIVE
   =========================== */

	@media (max-width: 768px) {

		.article {
			padding: 25px;
		}

		.article .imgSom {
			float: none;
			width: 100%;
			margin: 20px 0;
		}
	}