Modèle:Article détaillé/styles.css - Historique des versions

Hiob : charte graphique

2026-03-03T13:59:46Z

charte graphique

← Version précédente		Version du 3 mars 2026 à 13:59
Ligne 1 :		Ligne 1 :
	/* ================================		/* ================================
	ARTICLE DÉTAILLÉ - Citizen Skin		ARTICLE DÉTAILLÉ - Citizen Skin
	~~S'adapte automatiquement au thème~~		Palette : tokens Citizen natifs
			Dark mode : automatique via variables
	================================ */		================================ */

	.article-detaille {		.article-detaille {
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: ~~12px~~;		gap: var(--space-sm);
	padding: ~~10px 14px~~;		padding: var(--space-xs) var(--space-sm);
	margin: ~~12px~~ 0;		margin: var(--space-sm) 0;
	background-color: var(--color-surface-2);		background-color: var(--color-surface-2);
	border-left: ~~4px~~ solid var(--color-progressive);		border-left: 3px solid var(--color-progressive);
	border-radius: var(--border-radius-~~-medium~~);		border-radius: var(--border-radius-base);
	font-size: 0.95em;		font-size: 0.95em;
	line-height: 1.5;		line-height: 1.5;
			transition: background-color 0.2s ease, box-shadow 0.2s ease;
	}		}

			.article-detaille:hover {
			background-color: var(--color-surface-3);
			}

			/* --- Icône --- */

	.article-detaille-icone {		.article-detaille-icone {
	font-size: ~~18px~~;		font-size: 1.1em;
	color: var(--color-progressive);		color: var(--color-progressive);
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1;		line-height: 1;
			opacity: var(--opacity-icon-base);
	}		}

			/* --- Contenu --- */

	.article-detaille-contenu {		.article-detaille-contenu {
	flex: 1;		flex: 1;
	color: var(--color-base);		color: var(--color-base);
	}		}

	.article-detaille-contenu a {		.article-detaille-contenu a {
	color: var(--color-progressive);		color: var(--color-progressive);
	font-weight: ~~500~~;		font-weight: var(--font-weight-medium);
	text-decoration: none;		text-decoration: none;
	}		}

	.article-detaille-contenu a:hover {		.article-detaille-contenu a:hover {
	color: var(--color-progressive--hover);		color: var(--color-progressive--hover);
	text-decoration: underline;		text-decoration: underline;
	}		}

	/* Responsive */		/* --- Responsive --- */

	@media (max-width: 768px) {		@media (max-width: 768px) {
	.article-detaille {		.article-detaille {
	padding: ~~8px 12px~~;		padding: var(--space-xs);
	gap: ~~10px~~;		gap: var(--space-xs);
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: ~~16px~~;		font-size: 1em;
	}		}
	}		}

Hiob le 28 octobre 2025 à 17:15

2025-10-28T17:15:49Z

← Version précédente		Version du 28 octobre 2025 à 17:15
Ligne 1 :		Ligne 1 :
	/* ================================		/* ================================
	ARTICLE DÉTAILLÉ - ~~Compatible~~ Citizen		ARTICLE DÉTAILLÉ - Citizen Skin
			S'adapte automatiquement au thème
	================================ */		================================ */

Ligne 9 :		Ligne 10 :
	padding: 10px 14px;		padding: 10px 14px;
	margin: 12px 0;		margin: 12px 0;
	background-color: var(--~~background~~-~~color~~-~~primary, #e3f2fd~~);		background-color: var(--color-surface-2);
	border-left: 4px solid var(--color-~~primary, #1976d2~~);		border-left: 4px solid var(--color-progressive);
	border-radius: ~~4px~~;		border-radius: var(--border-radius--medium);
	font-size: 0.95em;		font-size: 0.95em;
	line-height: 1.5;		line-height: 1.5;
	~~color: var(--color-base, #202122);~~
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: 18px;		font-size: 18px;
	color: var(--color-~~primary, #1565c0~~);		color: var(--color-progressive);
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1;		line-height: 1;
Ligne 26 :		Ligne 26 :
	.article-detaille-contenu {		.article-detaille-contenu {
	flex: 1;		flex: 1;
			color: var(--color-base);
	}		}

	.article-detaille-contenu a {		.article-detaille-contenu a {
	color: var(--color-~~primary, #0d47a1~~);		color: var(--color-progressive);
	font-weight: 500;		font-weight: 500;
	text-decoration: none;		text-decoration: none;
Ligne 35 :		Ligne 36 :

	.article-detaille-contenu a:hover {		.article-detaille-contenu a:hover {
			color: var(--color-progressive--hover);
	text-decoration: underline;		text-decoration: underline;
	}		}

	/* ~~Ajustements spécifiques mode sombre~~ */		/* Responsive */
	~~.skin-citizen-dark .article-detaille,~~
	~~html[data-theme="dark"] .article-detaille {~~
	~~background-color: rgba(255, 255, 255, 0.05);~~
	~~border-left-color: #64b5f6;~~
	}

	@media (max-width: 768px) {		@media (max-width: 768px) {
	.article-detaille {		.article-detaille {

Hiob le 28 octobre 2025 à 16:56

2025-10-28T16:56:19Z

← Version précédente		Version du 28 octobre 2025 à 16:56
Ligne 1 :		Ligne 1 :
	/* ================================		/* ================================
	ARTICLE DÉTAILLÉ - ~~Style Bandeau~~		ARTICLE DÉTAILLÉ - Compatible Citizen
	================================ */		================================ */

Ligne 9 :		Ligne 9 :
	padding: 10px 14px;		padding: 10px 14px;
	margin: 12px 0;		margin: 12px 0;
	background-color: #e3f2fd;		background-color: var(--background-color-primary, #e3f2fd);
	border-left: 4px solid #1976d2;		border-left: 4px solid var(--color-primary, #1976d2);
	border-radius: 4px;		border-radius: 4px;
	font-size: 0.95em;		font-size: 0.95em;
	line-height: 1.5;		line-height: 1.5;
			color: var(--color-base, #202122);
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: 18px;		font-size: 18px;
	color: #1565c0;		color: var(--color-primary, #1565c0);
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1;		line-height: 1;
	}

	~~/* Forcer la transparence sur les spans FontAwesome */~~
	~~.article-detaille-icone *,~~
	~~.article-detaille-icone span {~~
	~~background: transparent !important;~~
	~~border: none !important;~~
	~~padding: 0 !important;~~
	~~margin: 0 !important;~~
	~~box-shadow: none !important;~~
	}		}

	.article-detaille-contenu {		.article-detaille-contenu {
	flex: 1;		flex: 1;
	~~color: #0d47a1;~~
	}		}

	.article-detaille-contenu a {		.article-detaille-contenu a {
	color: #0d47a1;		color: var(--color-primary, #0d47a1);
	font-weight: 500;		font-weight: 500;
	text-decoration: none;		text-decoration: none;
Ligne 48 :		Ligne 38 :
	}		}

	/* ~~================================~~		/* Ajustements spécifiques mode sombre */
	~~MODE SOMBRE~~		.skin-citizen-dark .article-detaille,
	~~================================~~ */		html[data-theme="dark"] .article-detaille {
			background-color: rgba(255, 255, 255, 0.05);
	~~[data-theme="dark"]~~ .~~article-detaille {~~		border-left-color: #64b5f6;
	~~background-color: #1a2332;~~
	~~border~~-~~left-color: #42a5f5;~~
	}

	~~[data~~-~~theme="~~dark"] .article-detaille~~-icone {~~
	~~color: #64b5f6;~~
	}

	[data-theme="dark"] .article-detaille~~-contenu~~ {
	color: ~~#90caf9~~;
	}

	~~[data~~-~~theme="dark"] .article~~-~~detaille-contenu a {~~
	color: #~~90caf9~~;
	}		}

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

	@media (max-width: 768px) {		@media (max-width: 768px) {

Hiob le 28 octobre 2025 à 13:50

2025-10-28T13:50:24Z

← Version précédente		Version du 28 octobre 2025 à 13:50
Ligne 1 :		Ligne 1 :
	/* ================================		/* ================================
	ARTICLE DÉTAILLÉ - Style ~~simple~~		ARTICLE DÉTAILLÉ - Style Bandeau
	================================ */		================================ */

	.article-detaille {		.article-detaille {
	display: flex;		display: flex;
	align-items: ~~flex-start~~;		align-items: center;
	gap: ~~8px~~;		gap: 12px;
	padding: 10px ~~12px~~;		padding: 10px 14px;
	margin: 12px 0;		margin: 12px 0;
	background-color: #~~f0f7ff~~;		background-color: #e3f2fd;
	border-left: ~~3px~~ solid #1976d2;		border-left: 4px solid #1976d2;
	border-radius: 4px;		border-radius: 4px;
			font-size: 0.95em;
			line-height: 1.5;
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: 18px;		font-size: 18px;
	color: #~~1976d2~~;		color: #1565c0;
	flex-shrink: 0;		flex-shrink: 0;
	margin-~~top~~: ~~2px~~;		line-height: 1;
			}

			/* Forcer la transparence sur les spans FontAwesome */
			.article-detaille-icone *,
			.article-detaille-icone span {
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
			box-shadow: none !important;
	}		}

	.article-detaille-contenu {		.article-detaille-contenu {
	flex: 1;		flex: 1;
	~~font-size: 0.95em;~~		color: #0d47a1;
	~~line-height: 1.5;~~
	}

	~~.article-detaille-label {~~
	~~font-weight: 600;~~
	~~color: #212121;~~
	}

	~~.article-detaille-liens {~~
	color: #~~1976d2~~;
	}		}

	.article-detaille-~~liens~~ a {		.article-detaille-contenu a {
	color: #~~0645ad~~;		color: #0d47a1;
			font-weight: 500;
	text-decoration: none;		text-decoration: none;
	}		}

	.article-detaille-~~liens~~ a:hover {		.article-detaille-contenu a:hover {
	text-decoration: underline;		text-decoration: underline;
	}		}
Ligne 51 :		Ligne 54 :
	[data-theme="dark"] .article-detaille {		[data-theme="dark"] .article-detaille {
	background-color: #1a2332;		background-color: #1a2332;
	border-left-color: #~~64b5f6~~;		border-left-color: #42a5f5;
	}		}

Ligne 58 :		Ligne 61 :
	}		}

	[data-theme="dark"] .article-detaille-~~label~~ {		[data-theme="dark"] .article-detaille-contenu {
	color: #~~e8eaed~~;		color: #90caf9;
	}		}

	[data-theme="dark"] .article-detaille-~~liens~~ a {		[data-theme="dark"] .article-detaille-contenu a {
	color: #~~8ab4f8~~;		color: #90caf9;
	}		}

Ligne 72 :		Ligne 75 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.article-detaille {		.article-detaille {
	padding: 8px ~~10px~~;		padding: 8px 12px;
	gap: ~~6px~~;		gap: 10px;
	}		}

Hiob le 28 octobre 2025 à 13:42

2025-10-28T13:42:08Z

Voir les modifications

Hiob le 28 octobre 2025 à 13:36

2025-10-28T13:36:02Z

← Version précédente		Version du 28 octobre 2025 à 13:36
Ligne 9 :		Ligne 9 :
	padding: 12px 16px;		padding: 12px 16px;
	margin: 16px 0;		margin: 16px 0;
	background: ~~linear-gradient(135deg,~~ #~~f5f5f5 0%, #e8e8e8 100%)~~;		background: #ffffff;
	border-left: 4px solid #1976d2;		border-left: 4px solid #1976d2;
	border-radius: 6px;		border-radius: 6px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;		transition: all 0.2s ease;
	~~box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);~~
	}		}

Ligne 21 :		Ligne 21 :
	}		}

			/* ICÔNE - Suppression totale des encadrés */
	.article-detaille-icone {		.article-detaille-icone {
	font-size: 24px;		font-size: 24px;
Ligne 26 :		Ligne 27 :
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1;		line-height: 1;
	/* ~~FORCER la suppression des encadrés~~ */		/* Forcer l'absence de styles */
	background: ~~none~~ !important;		background: transparent !important;
	border: none !important;		border: none !important;
	padding: 0 !important;		padding: 0 !important;
Ligne 37 :		Ligne 38 :
	}		}

	/* Cibler TOUS les ~~éléments enfants de l~~'~~icône~~ */		/* Cibler TOUS les niveaux d'imbrication FontAwesome */
	.article-detaille-icone *,		.article-detaille-icone *,
			.article-detaille-icone > *,
	.article-detaille-icone span,		.article-detaille-icone span,
	.article-detaille-icone > *,		.article-detaille-icone span span,
	.article-detaille-icone svg,		.article-detaille-icone svg,
	.article-detaille-icone i {		.article-detaille-icone i {
	background: ~~none~~ !important;		background: transparent !important;
	border: none !important;		border: none !important;
	padding: 0 !important;		padding: 0 !important;
Ligne 51 :		Ligne 53 :
	outline: none !important;		outline: none !important;
	color: inherit !important;		color: inherit !important;
			display: inline !important;
	}		}

			/* CONTENU - Suppression des encadrés */
	.article-detaille-contenu {		.article-detaille-contenu {
	flex: 1;		flex: 1;
Ligne 59 :		Ligne 63 :
	align-items: baseline;		align-items: baseline;
	gap: 6px;		gap: 6px;
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
	}		}

Ligne 65 :		Ligne 73 :
	color: #424242;		color: #424242;
	white-space: nowrap;		white-space: nowrap;
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
	}		}

Ligne 70 :		Ligne 82 :
	color: #1976d2;		color: #1976d2;
	font-weight: 500;		font-weight: 500;
			background: transparent !important;
			border: none !important;
			padding: 0 !important;
			margin: 0 !important;
	}		}

Ligne 76 :		Ligne 92 :
	text-decoration: none;		text-decoration: none;
	transition: text-decoration 0.2s ease;		transition: text-decoration 0.2s ease;
			background: transparent !important;
			border: none !important;
	}		}

Ligne 87 :		Ligne 105 :

	[data-theme="dark"] .article-detaille {		[data-theme="dark"] .article-detaille {
	background: ~~linear-gradient(135deg,~~ #~~2a2a2a 0%, #1f1f1f 100%)~~;		background: #1e1e1e;
	border-left-color: #64b5f6;		border-left-color: #64b5f6;
	}		}

Hiob le 28 octobre 2025 à 13:34

2025-10-28T13:34:48Z

← Version précédente		Version du 28 octobre 2025 à 13:34
Ligne 1 :		Ligne 1 :
	/* ================================		/* ================================
	ARTICLE DÉTAILLÉ - Citizen Skin		ARTICLE DÉTAILLÉ - Citizen Skin
	~~Version légère et subtile~~
	================================ */		================================ */

Ligne 7 :		Ligne 6 :
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: ~~10px~~;		gap: 12px;
	padding: ~~10px~~ 12px;		padding: 12px 16px;
	margin: 16px 0;		margin: 16px 0;
	background: ~~transparent~~;		background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
	border-left: ~~3px~~ solid #1976d2;		border-left: 4px solid #1976d2;
			border-radius: 6px;
	transition: all 0.2s ease;		transition: all 0.2s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	}		}

	.article-detaille:hover {		.article-detaille:hover {
	~~border~~-~~left-width~~: 4px;		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
	~~padding-left~~: ~~11px~~;		transform: translateX(2px);
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: ~~20px~~;		font-size: 24px;
	color: #1976d2;		color: #1976d2;
	flex-shrink: 0;		flex-shrink: 0;
	line-height: 1;		line-height: 1;
	~~font-weight: 400;~~		/* FORCER la suppression des encadrés */
	/* ~~Supprimer TOUS les styles de boîte~~ */
	background: none !important;		background: none !important;
	border: none !important;		border: none !important;
Ligne 33 :		Ligne 33 :
	border-radius: 0 !important;		border-radius: 0 !important;
	box-shadow: none !important;		box-shadow: none !important;
			outline: none !important;
	display: inline-flex !important;		display: inline-flex !important;
	}		}

	/* ~~Forcer la suppression des encadrés sur~~ TOUS les éléments enfants */		/* Cibler TOUS les éléments enfants de l'icône */
	.article-detaille-icone *,		.article-detaille-icone *,
	.article-detaille-icone span,		.article-detaille-icone span,
	.article-detaille-icone > ~~span,~~		.article-detaille-icone > *,
	~~.article-detaille-icone > span > span~~,
	.article-detaille-icone svg,		.article-detaille-icone svg,
	.article-detaille-icone i {		.article-detaille-icone i {
Ligne 49 :		Ligne 49 :
	border-radius: 0 !important;		border-radius: 0 !important;
	box-shadow: none !important;		box-shadow: none !important;
	~~display~~: ~~inline~~ !important;		outline: none !important;
	color: inherit !important;		color: inherit !important;
	}		}
Ligne 59 :		Ligne 59 :
	align-items: baseline;		align-items: baseline;
	gap: 6px;		gap: 6px;
	~~font-size: 0.95em;~~
	}		}

Ligne 66 :		Ligne 65 :
	color: #424242;		color: #424242;
	white-space: nowrap;		white-space: nowrap;
	~~/* Pas d'encadré sur le label */~~
	~~background: none !important;~~
	~~border: none !important;~~
	~~padding: 0 !important;~~
	}		}

	.article-detaille-liens {		.article-detaille-liens {
	color: #1976d2;		color: #1976d2;
	font-weight: ~~400~~;		font-weight: 500;
	}		}

Ligne 80 :		Ligne 75 :
	color: #1976d2;		color: #1976d2;
	text-decoration: none;		text-decoration: none;
	~~border-bottom: 1px dotted #1976d2;~~		transition: text-decoration 0.2s ease;
	transition: ~~border~~-~~bottom~~ 0.2s ease;
	}		}

	.article-detaille-liens a:hover {		.article-detaille-liens a:hover {
	~~border~~-~~bottom-style~~: ~~solid~~;		text-decoration: underline;
	}		}

Ligne 93 :		Ligne 87 :

	[data-theme="dark"] .article-detaille {		[data-theme="dark"] .article-detaille {
			background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
	border-left-color: #64b5f6;		border-left-color: #64b5f6;
	}		}
Ligne 110 :		Ligne 105 :
	[data-theme="dark"] .article-detaille-liens a {		[data-theme="dark"] .article-detaille-liens a {
	color: #64b5f6;		color: #64b5f6;
	~~border-bottom-color: #64b5f6;~~
	}		}

Ligne 119 :		Ligne 113 :
	@media (max-width: 768px) {		@media (max-width: 768px) {
	.article-detaille {		.article-detaille {
	gap: ~~8px~~;		gap: 10px;
	padding: ~~8px~~ 10px;		padding: 10px 14px;
	}		}

	.article-detaille-icone {		.article-detaille-icone {
	font-size: ~~18px~~;		font-size: 20px;
	}		}

Ligne 130 :		Ligne 124 :
	flex-direction: column;		flex-direction: column;
	align-items: flex-start;		align-items: flex-start;
	gap: ~~2px~~;		gap: 4px;
	}		}
	}		}

Hiob le 28 octobre 2025 à 13:33

2025-10-28T13:33:36Z

Voir les modifications

Hiob : Page créée avec « /* ================================ ARTICLE DÉTAILLÉ - Citizen Skin ================================ */ .article-detaille { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 16px 0; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); border-left: 4px solid #1976d2; border-radius: 6px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .article-detaille:hover { box-shadow: 0 4... »

2025-10-28T13:29:02Z

Page créée avec « ================================ ARTICLE DÉTAILLÉ - Citizen Skin ================================ : .article-detaille { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 16px 0; background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); border-left: 4px solid #1976d2; border-radius: 6px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); } .article-detaille:hover { box-shadow: 0 4... »

Nouvelle page

/* ================================
ARTICLE DÉTAILLÉ - Citizen Skin
================================ */

.article-detaille {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin: 16px 0;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
border-left: 4px solid #1976d2;
border-radius: 6px;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.article-detaille:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
transform: translateX(2px);
}

.article-detaille-icone {
font-size: 24px;
color: #1976d2;
flex-shrink: 0;
line-height: 1;
/* Supprimer les styles de boîte */
background: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}

.article-detaille-icone *,
.article-detaille-icone span,
.article-detaille-icone svg {
background: none !important;
border: none !important;
padding: 0 !important;
display: inline !important;
color: inherit !important;
}

.article-detaille-contenu {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
font-size: 0.95em;
}

.article-detaille-label {
font-weight: 600;
color: #424242;
white-space: nowrap;
}

.article-detaille-liens {
color: #1976d2;
font-weight: 500;
}

.article-detaille-liens a {
color: #1976d2;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}

.article-detaille-liens a:hover {
border-bottom-color: #1976d2;
}

/* ================================
MODE SOMBRE
================================ */

[data-theme="dark"] .article-detaille {
background: linear-gradient(135deg, #1e2432 0%, #252b3a 100%);
border-left-color: #42a5f5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .article-detaille:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .article-detaille-icone {
color: #90caf9;
}

[data-theme="dark"] .article-detaille-label {
color: #e0e0e0;
}

[data-theme="dark"] .article-detaille-liens {
color: #90caf9;
}

[data-theme="dark"] .article-detaille-liens a {
color: #90caf9;
}

[data-theme="dark"] .article-detaille-liens a:hover {
border-bottom-color: #90caf9;
}

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

@media (max-width: 600px) {
.article-detaille {
padding: 10px 14px;
gap: 10px;
}

.article-detaille-icone {
font-size: 20px;
}

.article-detaille-contenu {
font-size: 0.9em;
gap: 4px;
}

.article-detaille-label {
width: 100%;
}
}

/* ================================
VARIANTE COMPACTE (optionnelle)
================================ */

.article-detaille.compact {
padding: 8px 12px;
margin: 12px 0;
}

.article-detaille.compact .article-detaille-icone {
font-size: 18px;
}

.article-detaille.compact .article-detaille-contenu {
font-size: 0.88em;
}