/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}

h1 { font-size: var(--text-5xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-4xl); margin-bottom: var(--space-5); }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-xl);  margin-bottom: var(--space-3); }

p {
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--text-link-hover); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { list-style: none; }

/* Conteneur */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.container-narrow { max-width: var(--max-width-narrow); }
.container-wide   { max-width: var(--max-width-wide); }

/* Sections */
.section    { padding: var(--space-20) 0; }
.section-sm { padding: var(--space-12) 0; }
.section-lg { padding: var(--space-32) 0; }

.section-warm { background: var(--color-warm-light); }

.section-dark {
    background: var(--color-primary);
    color: var(--text-inverse);
}
.section-dark h1,
.section-dark h2,
.section-dark h3 { color: var(--text-inverse); }

/* Grilles */
.grid   { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex   { display: flex; align-items: center; }

/* Utilitaires texte */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-sm       { font-size: var(--text-sm); }
.text-lg       { font-size: var(--text-lg); }
.text-muted    { color: var(--text-secondary); }
.text-accent   { color: var(--text-accent); }
.text-white    { color: var(--text-inverse); }
.text-danger   { color: var(--color-error); }
.font-heading  { font-family: var(--font-heading); }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Espacement utilitaire */
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Sélection */
::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Focus accessibilité */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Séparateurs */
hr {
    border: none;
    border-top: 1px solid var(--color-gray-100);
    margin: var(--space-8) 0;
}

/* Images utilitaires */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container aliases */
.container--narrow { max-width: var(--max-width-narrow); }
.container--wide   { max-width: var(--max-width-wide); }

/* Additional spacing utilities */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

/* BEM aliases — views use both conventions */
.section--sm  { padding: var(--space-12) 0; }
.section--lg  { padding: var(--space-32) 0; }
.section--warm { background: var(--color-warm-light); }
.section--primary {
    background: var(--color-primary);
    color: var(--text-inverse);
}
.section--primary h1,
.section--primary h2,
.section--primary h3 { color: var(--text-inverse); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Empty state générique */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--text-secondary);
}
.empty-state p { margin-bottom: var(--space-4); }