/* ===== ICONS ===== */
.icon { 
    font-style: normal; 
    display: inline-block; 
    line-height: 1;
}

/* Flèches */
.icon-chevron-left::before { content: "❮"; }
.icon-chevron-right::before { content: "❯"; }
.icon-arrow-left::before { content: "←"; }
.icon-arrow-right::before { content: "→"; }
.icon-chevron-up::before { content: "↑"; }

/* Actions */
.icon-search::before { content: "🔍"; }
.icon-close::before { content: "✕"; }
.icon-reading-time::before { content: "⏱️"; margin-right: 3px; }

/* Thème - Icônes claires */
.icon-light-mode::before { 
    content: "☀️"; 
    font-size: 1.2rem;
}
.icon-dark-mode::before { 
    content: "🌙"; 
    font-size: 1.2rem;
}

/* Variante avec des caractères Unicode si vous préférez */
/*
.icon-light-mode::before { content: "☀"; }
.icon-dark-mode::before { content: "☾"; }
*/

/* ===== UTILITAIRES ===== */
/* Tailles de police */
.h1 { font-size: 2.375rem; }
.h2 { font-size: 2rem; }
.h3 { font-size: 1.625rem; }
.h4 { font-size: 1.25rem; }
.h5 { font-size: 1.125rem; }
.h6 { font-size: 1rem; }

/* Marges */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 5rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 5rem; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }
.gap-5 { gap: 3rem; }
.gap-6 { gap: 5rem; }