/* ==========================================================================
   EPC Brand Guide → Base Styles (Typography, Body, Links, Lists)
   ========================================================================== */

/* -- Body ---------------------------------------------------------------- */
body {
    font-family: var(--font-primary);
    font-size: var(--body-size);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    color: var(--gris-fonce);
    background-color: var(--blanc);
}

/* -- Headings ------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bleu-marine);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: var(--h1-size);
    font-weight: var(--fw-black);
    font-style: italic;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2 {
    font-size: var(--h2-size);
    font-weight: var(--fw-bold);
    font-style: italic;
    line-height: 1.25;
}

h3 {
    font-size: var(--h3-size);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
}

h4 {
    font-size: var(--h4-size);
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

h5 {
    font-size: var(--body-size);
    font-weight: var(--fw-bold);
    line-height: 1.4;
}

h6 {
    font-size: var(--small-size);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -- Paragraphs ---------------------------------------------------------- */
p {
    margin-bottom: 1em;
}

p:last-child {
    margin-bottom: 0;
}

/* -- Links --------------------------------------------------------------- */
a {
    color: var(--or-profond);
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--ambre-dore);
}

/* -- Focus Visible ------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--or-profond);
    outline-offset: 2px;
}

/* -- Lists --------------------------------------------------------------- */
.content-list {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.content-list li {
    margin-bottom: 0.4em;
    line-height: 1.6;
    position: relative;
    padding-left: 0.5em;
}

ul.content-list li::before {
    content: '•';
    color: var(--or-profond);
    font-weight: var(--fw-bold);
    position: absolute;
    left: -1em;
}

ol.content-list {
    list-style: decimal;
}

ol.content-list li::before {
    content: none;
}

/* -- Strong & Emphasis --------------------------------------------------- */
strong,
b {
    font-weight: var(--fw-bold);
    color: var(--bleu-marine);
}

em,
i {
    font-style: italic;
}

/* -- Small Text ---------------------------------------------------------- */
small,
.text-small {
    font-size: var(--small-size);
    color: var(--gris-moyen);
    line-height: 1.5;
}

/* -- Horizontal Rule ----------------------------------------------------- */
hr {
    border: none;
    height: 2px;
    background: var(--or-profond);
    margin: var(--space-lg) auto;
    width: 60%;
}

/* -- Code ---------------------------------------------------------------- */
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(23, 38, 78, 0.06);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

pre {
    background: var(--noir-profond);
    color: var(--or-clair);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: var(--space-md);
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin-bottom: 1em;
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* -- Selection ----------------------------------------------------------- */
::selection {
    background: var(--or-clair);
    color: var(--bleu-marine);
}