/* ==========================================================================
   LE MUSCLÉ DU WEB — Base Styles
   Reset + Typographie + Utilitaires globaux
   ========================================================================== */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-darkest);
  overflow-x: hidden;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}
h1 { font-size: var(--text-hero); font-weight: var(--font-weight-extrabold); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--text-4xl)); margin-bottom: var(--space-6); scroll-margin-top: 120px; }
h3 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h4 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
p { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-text-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }
strong, b { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
small { font-size: var(--text-sm); color: var(--color-text-muted); }
ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
li { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-bottom: var(--space-2); }
li::marker { color: var(--color-accent); }
img, video, svg { display: block; max-width: 100%; height: auto; }

/* FORMS */
input, textarea, select {
  font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-primary);
  background-color: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none; width: 100%;
}
input:focus, textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); }
label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); display: block; }

::selection { background-color: var(--color-accent); color: var(--color-text-inverse); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-darkest); }
::-webkit-scrollbar-thumb { background: var(--color-bg-elevated); border-radius: var(--radius-full); }

/* LAYOUT */
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--section-px); }
.container--narrow { max-width: var(--max-width-narrow); }
.container--wide { max-width: var(--max-width-wide); }

/* SECTIONS */
.section { padding-block: var(--section-py); }
.section--dark { background-color: var(--color-bg-darkest); }
.section--alt { background-color: var(--color-bg-dark); }

.section-header { text-align: center; max-width: 700px; margin-inline: auto; margin-bottom: var(--space-12); }
.section-header__overtitle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-weight-semibold);
  color: var(--color-accent); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-4);
}
.section-header__overtitle::before { content: ''; width: 32px; height: 2px; background: var(--color-accent); border-radius: 1px; }
.section-header__description { font-size: var(--text-lg); color: var(--color-text-secondary); }

/* GRIDS */
.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); }
@media (max-width: 1024px) { .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* FLEX */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* TEXT UTILITIES */
.text-center { text-align: center; }
.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.section-footnote { text-align: center; margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); }
.section-footnote--italic { font-style: italic; }
.cta-wrapper { text-align: center; margin-top: var(--space-8); }

/* ANIMATIONS */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px var(--color-accent-glow); } 50% { box-shadow: 0 0 40px var(--color-accent-glow); } }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }