/* ── Guide pédagogique : feuille de styles autonome (n'a pas besoin du style.css parent) ── */

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

:root {
    /* Base palette (synchronisée avec /style.css) */
    --primary: #7600FF;
    --primary-dark: #5d00cc;
    --accent: #FFA0A0;
    --bg: rgb(247, 242, 230);
    --dark: #2a2a2a;
    --text: #333;
    --text-muted: #929292;
    --white: #fff;
    --border: rgba(255, 255, 255, 0.5);
    --card-bg: rgba(255, 255, 255, 0.72);
    --card-border: rgba(255, 255, 255, 0.5);
    --shadow: 0 8px 32px rgba(118, 0, 255, 0.08);
    --radius: 20px;
    --radius-sm: 10px;
    --font: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --max-width: 1080px;

    /* Guide-specific */
    --guide-max: 760px;
    --guide-wide: 1080px;
    --chapter-accent: var(--primary);
    --block-color-break:  #e3dfcc;
    --block-color-static: rgb(154, 123, 212);
    --block-color-text:   rgb(186, 226, 127);
    --block-color-image:  rgb(233, 107, 168);

    /* Couleurs de blocs Esquisse, utilisées par dynamic-mesh.js */
    --color-break:  #e3dfcc;
    --color-static: rgb(154, 123, 212);
    --color-text:   rgb(186, 226, 127);
    --color-image:  rgb(233, 107, 168);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 {
    line-height: 1.15;
    letter-spacing: -0.02em;
}

strong {
    background: linear-gradient(to bottom, transparent 60%, rgba(118, 0, 255, 0.12) 60%);
    font-weight: 700;
    color: #000;
}

a { color: var(--primary); }

/* Mesh background canvas */
#mesh-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* Top nav */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(247, 242, 230, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(118, 0, 255, 0.08);
}
.nav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
}
.nav__logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}
.nav__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Buttons */
.btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    font-family: var(--font);
}
.btn--primary {
    background: linear-gradient(135deg, #7600FF 0%, #9a40d8 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(118, 0, 255, 0.25);
}
.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(118, 0, 255, 0.35);
}
.btn--ghost {
    background: transparent;
    color: var(--dark);
    border: 1px solid rgba(118, 0, 255, 0.2);
}
.btn--ghost:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.nav__cta { font-size: 14px; padding: 10px 22px; }

html[data-block-color="break"]  { --chapter-accent: #8a7d3e; --chapter-accent-soft: rgba(227, 223, 204, 0.6); }
html[data-block-color="static"] { --chapter-accent: #6f4dbf; --chapter-accent-soft: rgba(154, 123, 212, 0.18); }
html[data-block-color="text"]   { --chapter-accent: #4f8b2a; --chapter-accent-soft: rgba(186, 226, 127, 0.25); }
html[data-block-color="image"]  { --chapter-accent: #c93f7d; --chapter-accent-soft: rgba(233, 107, 168, 0.18); }

body {
    background: transparent;
}

/* ── Nav: lighter / chapter-aware ── */
.nav__brand small {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
    letter-spacing: 0.02em;
}

.nav__back {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    margin-right: 12px;
}
.nav__back:hover { color: var(--chapter-accent); }

/* ── Chapter page ── */
.chapter {
    max-width: var(--guide-max);
    margin: 0 auto;
    padding: 140px 24px 80px;
    position: relative;
    z-index: 1;
}

.chapter--wide {
    max-width: var(--guide-wide);
}

.chapter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--chapter-accent);
    margin-bottom: 24px;
}

.chapter__eyebrow-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--chapter-accent);
}

.chapter__title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dark);
    margin-bottom: 28px;
}
.chapter__title em {
    font-style: normal;
    color: var(--chapter-accent);
}

.chapter__lede {
    font-size: 20px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 48px;
    max-width: 36em;
}

.chapter__lede strong {
    color: #000;
    background: linear-gradient(to bottom, transparent 60%, var(--chapter-accent-soft) 60%);
}

.chapter__icon {
    margin-bottom: 24px;
    line-height: 0;
}
.chapter__icon svg {
    width: 64px;
    height: 64px;
    display: block;
}

.chapter__body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
}

.chapter__body h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--dark);
    margin: 56px 0 18px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.chapter__body h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
    margin: 36px 0 12px;
}

.chapter__body p {
    margin-bottom: 18px;
}

.chapter__body p + p { margin-top: 0; }

.chapter__body strong {
    color: #000;
    background: linear-gradient(to bottom, transparent 60%, var(--chapter-accent-soft) 60%);
    font-weight: 700;
}

.chapter__body em {
    font-style: italic;
}

.chapter__body ul, .chapter__body ol {
    margin: 16px 0 24px;
    padding-left: 24px;
}
.chapter__body li {
    margin-bottom: 10px;
}

.chapter__body blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--chapter-accent);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0 12px 12px 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
}
.chapter__body blockquote p { margin: 0; }
.chapter__body blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--chapter-accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Pull-quote (more prominent) ── */
.pull {
    margin: 48px 0;
    padding: 36px 32px;
    background: linear-gradient(135deg, #1a0033 0%, #2d0a5e 100%);
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 16px 48px rgba(118, 0, 255, 0.20);
    position: relative;
}
.pull::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 24px;
    font-size: 120px;
    line-height: 1;
    font-family: Georgia, serif;
    color: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}
.pull__text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
    position: relative;
    margin: 0 0 16px;
}
.pull__author {
    font-size: 12px;
    font-weight: 700;
    color: #c9a8ff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Incarnation card: "how Esquisse embodies this principle" ── */
.incarnation {
    margin: 56px 0 24px;
    padding: 36px 36px;
    border-radius: 22px;
    background: var(--card-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    position: relative;
}
.incarnation__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--chapter-accent);
    margin-bottom: 16px;
}
.incarnation__tag::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--chapter-accent);
    display: inline-block;
}
.incarnation__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.incarnation__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
}
.incarnation__body p { margin-bottom: 14px; }
.incarnation__body p:last-child { margin-bottom: 0; }
.incarnation__body strong {
    color: #000;
    background: linear-gradient(to bottom, transparent 60%, var(--chapter-accent-soft) 60%);
}
.incarnation__body ul {
    margin: 12px 0;
    padding-left: 22px;
}
.incarnation__body li { margin-bottom: 8px; }

/* ── Diagram container ── */
.diagram {
    margin: 48px 0;
    padding: 32px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    border: 1px solid var(--card-border);
}
.diagram__caption {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 14px;
    font-style: italic;
    text-align: center;
}
.diagram svg,
.diagram img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Three-up grid for in-chapter cards ── */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 28px 0 36px;
}
.cards--two { grid-template-columns: repeat(2, 1fr); }
.card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px 22px 24px;
}
.card__num {
    font-size: 12px;
    font-weight: 700;
    color: var(--chapter-accent);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: block;
}
.card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 8px;
    line-height: 1.3;
}
.card__text {
    font-size: 14px;
    color: var(--text);
    line-height: 1.55;
    margin: 0;
}

/* ── Chapter navigation footer ── */
.chapter-nav {
    margin-top: 80px;
    padding: 28px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.chapter-nav__item {
    flex: 1;
    text-decoration: none;
    color: var(--text);
    padding: 18px 22px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    transition: transform 0.2s, box-shadow 0.2s;
}
.chapter-nav__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.chapter-nav__item--next { text-align: right; }
.chapter-nav__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.chapter-nav__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    margin-top: 4px;
    line-height: 1.3;
}

/* ── Index page (table of contents) ── */
.toc {
    max-width: var(--guide-wide);
    margin: 0 auto;
    padding: 120px 24px 80px;
    position: relative;
    z-index: 1;
}
.toc__intro {
    max-width: 720px;
    margin-bottom: 64px;
}
.toc__eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 18px;
}
.toc__title {
    font-size: clamp(36px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--dark);
    margin-bottom: 18px;
}
.toc__title em {
    font-style: normal;
    color: var(--primary);
}
.toc__subtitle {
    font-size: 22px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 28px;
}
.toc__lede {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 18px;
}

.toc__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 32px;
}

.toc-item {
    display: block;
    padding: 26px 26px 28px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.toc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}
.toc-item__bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
}
.toc-item--break  .toc-item__bar { background: var(--block-color-break); }
.toc-item--static .toc-item__bar { background: var(--block-color-static); }
.toc-item--text   .toc-item__bar { background: var(--block-color-text); }
.toc-item--image  .toc-item__bar { background: var(--block-color-image); }
.toc-item__num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}
.toc-item__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.toc-item__text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ── Inline "block" tag (used to inline-tint a word with a block color) ── */
.btag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.btag--break  { background: var(--block-color-break);  color: #5e521f; }
.btag--static { background: var(--block-color-static); color: #fff; }
.btag--text   { background: var(--block-color-text);   color: #2c4d10; }
.btag--image  { background: var(--block-color-image);  color: #fff; }

/* ── Vocab list ── */
.vocab {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 32px 0;
}
.vocab__row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.vocab__term {
    font-weight: 700;
    color: var(--dark);
}
.vocab__term-meta {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.vocab__def {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .toc__grid { grid-template-columns: 1fr; }
    .cards { grid-template-columns: 1fr; }
    .vocab__row { grid-template-columns: 1fr; gap: 4px; }
    .chapter-nav { flex-direction: column; }
    .chapter-nav__item--next { text-align: left; }
    .chapter { padding: 110px 20px 60px; }
    .toc { padding: 100px 20px 60px; }
}