/* ============================================================
   assets/css/reset.css — Reset + Base + Utilitaires
   ============================================================ */

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

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

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--clr-text);
    background-color: var(--clr-bg-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select {
    font: inherit;
}

ul, ol { list-style: none; }

a {
    color: inherit;
    text-decoration: none;
}

button { cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--clr-text-heading);
    letter-spacing: 0.03em;
}

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }

strong { font-weight: 600; color: var(--clr-text-heading); }

code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--clr-bg-card-alt);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    color: var(--clr-accent);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--clr-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--clr-bg-elevated); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-border-light); }

/* ── Layout ── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--sp-8);
}

.main-content {
    flex: 1;
    padding-top: var(--nav-height);
}

/* ── Section générique ── */
.section { padding: var(--sp-16) 0; }
.section--alt { background: var(--clr-bg-deep); }
.section--sm  { padding: var(--sp-10) 0; }

/* ── Page hero ── */
.page-hero {
    background: linear-gradient(160deg, var(--clr-bg-deep) 0%, #0a1838 100%);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--sp-12) 0 var(--sp-8);
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 25% 60%, var(--clr-primary-glow) 0%, transparent 55%);
    pointer-events: none;
}
.page-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--clr-accent-sub);
    border: 1px solid rgba(96,165,250,0.2);
    border-radius: var(--radius-full);
    padding: var(--sp-1) var(--sp-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-accent);
    margin-bottom: var(--sp-4);
}
.page-hero__title {
    font-size: clamp(1.8rem, 4vw, var(--text-4xl));
    color: var(--clr-text-heading);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
}
.page-hero__title span { color: var(--clr-accent); }
.page-hero__sub { color: var(--clr-text-muted); font-size: var(--text-lg); }

/* ── Grid ── */
.grid     { display: grid; gap: var(--sp-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-template-columns: repeat(2,1fr); }
    .grid--3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
    .grid--2,.grid--3,.grid--4 { grid-template-columns: 1fr; }
    .container { padding-inline: var(--sp-4); }
}

/* ── Flex utils ── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.items-start { align-items: flex-start; }

/* ── Texte ── */
.text-center  { text-align: center; }
.text-muted   { color: var(--clr-text-muted); }
.text-success { color: var(--clr-success); }
.text-danger  { color: var(--clr-danger); }
.text-warning { color: var(--clr-warning); }
.text-accent  { color: var(--clr-accent); }

/* ── Fieldset ── */
.fieldset {
    background: var(--clr-bg-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--sp-6) var(--sp-8);
    margin-bottom: var(--sp-5);
    position: relative;
}
.fieldset > legend {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    background: var(--clr-bg-card);
    padding: 0 var(--sp-3);
    margin-left: calc(-1 * var(--sp-3));
    position: absolute;
    top: -10px;
    left: var(--sp-6);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
}