Modèle:Article détaillé/styles.css

/* ================================
   ARTICLE DÉTAILLÉ - Citizen Skin
   Palette : tokens Citizen natifs
   Dark mode : automatique via variables
   ================================ */

.article-detaille {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
margin: var(--space-sm) 0;
background-color: var(--color-surface-2);
border-left: 3px solid var(--color-progressive);
border-radius: var(--border-radius-base);
font-size: 0.95em;
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 {
font-size: 1.1em;
color: var(--color-progressive);
flex-shrink: 0;
line-height: 1;
opacity: var(--opacity-icon-base);
}

/* --- Contenu --- */

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

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

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

/* --- Responsive --- */

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

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