/* ═══════════════════════════════════════════════════════════════════
   Cairn — thème mdBook porté depuis cairn.html
   Palette, typographie et composants du document de conception d'origine.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Jetons de design (toujours disponibles) ---- */
:root {
    --ink: #080a0f;
    --panel: #10141c;
    --card: #161c27;
    --hair: #28303f;
    --hair-soft: #1d2430;
    --head: #f1f4fa;
    --body: #c6cedc;
    --lede: #aab4c6;
    --mut: #7e8aa0;
    --sys: #6ea8fe;
    --key: #c7b6ff;
    --risk: #ff8a5b;
    --ok: #79e0b8;
    --sys-dim: rgba(110, 168, 254, 0.14);
    --risk-dim: rgba(255, 138, 91, 0.13);
    --key-dim: rgba(199, 182, 255, 0.13);
    --disp: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
    --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --content-max-width: 820px;
}

/* ---- Typographie globale ---- */
html {
    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.content main {
    line-height: 1.7;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    font-family: var(--disp);
    color: var(--head);
    letter-spacing: -0.022em;
    line-height: 1.15;
}
.content h1 {
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.4rem;
}
.content h2 {
    font-weight: 600;
    margin-top: 2.6rem;
}
.content p,
.content li {
    line-height: 1.7;
}
.content em {
    color: #dbe2ef;
}
.content strong,
.content b {
    color: var(--head);
}

/* ---- Palette coal → Cairn ---- */
.coal {
    --bg: #080a0f;
    --fg: #c6cedc;
    --sidebar-bg: #0a0d13;
    --sidebar-fg: #7e8aa0;
    --sidebar-active: #6ea8fe;
    --sidebar-spacer: #1d2430;
    --sidebar-non-existant: #4a5163;
    --scrollbar: #28303f;
    --icons: #545e72;
    --icons-hover: #b3c0cc;
    --links: #6ea8fe;
    --inline-code-color: #d6def0;
    --theme-popup-bg: #10141c;
    --theme-popup-border: #28303f;
    --theme-hover: #161c27;
    --quote-bg: #10141c;
    --quote-border: #28303f;
    --warning-border: #ff8a5b;
    --table-border-color: #28303f;
    --table-header-bg: #161c27;
    --table-alternate-bg: #0d1118;
    --search-mark-bg: #355c7d;
}

/* ---- Barre latérale ---- */
.sidebar .sidebar-scrollbox {
    padding: 1.8rem 1.2rem;
}

/* Rythme généreux entre les grandes sections (A, B, C...) */
.chapter > li.chapter-item {
    margin-block-start: 1.15rem;
    line-height: 1.5em;
}
.chapter > li.chapter-item:first-child {
    margin-block-start: 0;
}
.chapter > li.chapter-item > .chapter-link-wrapper > a {
    font-weight: 600;
    color: var(--sidebar-fg);
}

/* Sous-pages : indentation nette + repère visuel, texte plus discret */
.chapter ol.section {
    padding-inline-start: 1.7rem;
    margin-block: 0.4rem 0;
    border-inline-start: 1px solid var(--hair-soft);
}
.chapter ol.section > li.chapter-item {
    margin-block-start: 0.55rem;
    line-height: 1.45em;
}
.chapter ol.section > li.chapter-item > .chapter-link-wrapper > a {
    font-weight: 400;
    font-size: 0.93em;
    color: var(--sidebar-non-existant);
}
.chapter ol.section > li.chapter-item > .chapter-link-wrapper > a:hover,
.chapter ol.section > li.chapter-item > .chapter-link-wrapper > a.active {
    color: var(--sidebar-active);
}

.chapter li.part-title {
    font-family: var(--mono-font);
    font-size: 1.06rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mut);
}
.sidebar .sidebar-title,
#menu-title {
    font-family: var(--disp);
    letter-spacing: -0.01em;
}

/* ---- Liens & code ---- */
.content a > .hljs,
.content a {
    text-decoration: none;
}
.content a:hover {
    text-decoration: underline;
}
.content code {
    font-family: var(--mono-font);
    font-size: 0.86em;
    background: #0d1118;
    border: 1px solid var(--hair-soft);
    padding: 0.08em 0.4em;
    border-radius: 5px;
    color: #d6def0;
}

/* ═══════════════ Composants portés ═══════════════ */

/* Étiquette d'adresse dans les titres */
.content h1 .addr-tag,
.content h2 .addr-tag,
.content .addr-tag {
    font-family: var(--mono-font);
    font-size: 1.28rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--sys);
    background: var(--sys-dim);
    border: 1px solid var(--sys-dim);
    padding: 0.26rem 0.55rem;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.55rem;
}
.content .addr-tag.sec {
    color: var(--key);
    background: var(--key-dim);
    border-color: var(--key-dim);
    font-weight: 700;
}

/* Badge de statut */
.content .badge {
    font-family: var(--mono-font);
    font-size: 0.99rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.3rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}
.content .badge.ok {
    color: var(--ok);
    border: 1px solid rgba(121, 224, 184, 0.32);
    background: rgba(121, 224, 184, 0.08);
}
.content .badge.open {
    color: var(--risk);
    border: 1px solid rgba(255, 138, 91, 0.32);
    background: var(--risk-dim);
}
.content .badge.part {
    color: var(--key);
    border: 1px solid rgba(199, 182, 255, 0.32);
    background: var(--key-dim);
}
.content .badge.todo {
    color: var(--mut);
    border: 1px solid var(--hair);
    background: var(--card);
}
.content .badge.rec {
    color: var(--sys);
    border: 1px solid rgba(110, 168, 254, 0.32);
    background: var(--sys-dim);
}

/* Termes colorés */
.content .t-sys {
    color: var(--sys);
    font-weight: 600;
}
.content .t-key {
    color: var(--key);
    font-weight: 600;
}
.content .t-risk {
    color: var(--risk);
    font-weight: 600;
}

/* Chapô */
.content p.lede {
    font-size: 1.79rem;
    color: var(--lede);
    line-height: 1.55;
    margin: 0 0 1.6rem;
}

/* Liste de sujets (checklists de section) */
.content ul.tlist {
    list-style: none;
    padding: 0;
    margin: 1.4rem 0;
    display: grid;
    gap: 0.4rem;
}
.content ul.tlist > li {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.44rem;
    padding: 0.5rem 0.8rem;
    border-radius: 7px;
    background: var(--card);
    border-left: 2px solid var(--hair);
    margin: 0;
}
.content .tlist .ts {
    font-family: var(--mono-font);
    font-size: 1.25rem;
    flex: 0 0 1.1em;
    text-align: center;
    color: var(--mut);
}
.content .tlist .td {
    flex: 1 1 0;
    line-height: 1.4;
    color: var(--lede);
}
.content .tlist .td .note {
    font-size: 1.31rem;
    color: var(--mut);
    display: block;
    margin-top: 0.12rem;
}
.content a.tref {
    font-family: var(--mono-font);
    font-size: 1.12rem;
    color: var(--sys);
    background: var(--sys-dim);
    border: 1px solid var(--sys-dim);
    padding: 0.07rem 0.33rem;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
    flex: 0 0 auto;
}
.content a.tref:hover {
    color: #9cc3ff;
    text-decoration: none;
}
.content .tl-ok {
    border-left-color: var(--ok) !important;
}
.content .tl-ok .ts {
    color: var(--ok);
}
.content .tl-ok .td {
    color: var(--body);
}
.content .tl-part {
    border-left-color: var(--key) !important;
}
.content .tl-part .ts {
    color: var(--key);
}
.content .tl-part .td {
    color: var(--body);
}
.content .tl-open {
    opacity: 0.75;
}

/* Encart / callout */
.content .callout {
    border-left: 2px solid var(--sys);
    background: linear-gradient(90deg, var(--sys-dim), transparent 70%);
    padding: 1rem 1.2rem;
    border-radius: 0 8px 8px 0;
    margin: 1.6rem 0;
    font-size: 1.57rem;
    color: var(--body);
}
.content .callout.risk {
    border-left-color: var(--risk);
    background: linear-gradient(90deg, var(--risk-dim), transparent 70%);
}
.content .callout.key {
    border-left-color: var(--key);
    background: linear-gradient(90deg, var(--key-dim), transparent 70%);
}
.content .callout.ok {
    border-left-color: var(--ok);
    background: linear-gradient(90deg, rgba(121, 224, 184, 0.12), transparent 70%);
}
.content .callout b {
    color: var(--head);
}
.content .callout .lbl {
    display: block;
    font-family: var(--mono-font);
    font-size: 1.06rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mut);
    margin-bottom: 0.45rem;
}

/* Liste épurée */
.content ul.clean {
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}
.content ul.clean > li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.9rem;
    font-size: 1.58rem;
}
.content ul.clean > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--sys);
}
.content ul.clean > li.k::before {
    background: var(--key);
}
.content ul.clean > li.r::before {
    background: var(--risk);
}
.content ul.clean > li b {
    color: var(--head);
}

/* Pipeline monospace */
.content .pipe {
    background: #0b0f16;
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin: 1.6rem 0;
    font-family: var(--mono-font);
    font-size: 1.38rem;
    line-height: 1.9;
    color: var(--body);
    overflow-x: auto;
}
.content .pipe .c {
    color: #566177;
}
.content .pipe .ks {
    color: var(--key);
}
.content .pipe .ss {
    color: var(--sys);
}
.content .pipe .rs {
    color: var(--risk);
}

/* Grille de portée (scope) */
.content .scope {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin: 1.7rem 0;
}
.content .scope .row {
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: var(--card);
}
.content .scope .row h4 {
    margin: 0 0 0.35rem;
    font-family: var(--mono-font);
    font-size: 1.31rem;
    letter-spacing: 0.02em;
    color: var(--head);
    font-weight: 600;
}
.content .scope .row p {
    margin: 0;
    font-size: 1.47rem;
    color: var(--body);
}
.content .scope .row .tag {
    font-family: var(--mono-font);
    font-size: 1.06rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.content .tag.danger {
    color: var(--risk);
    background: var(--risk-dim);
}
.content .tag.mid {
    color: var(--key);
    background: var(--key-dim);
}
.content .tag.safe {
    color: var(--ok);
    background: rgba(121, 224, 184, 0.1);
}
.content .scope .row.pick {
    border-color: rgba(110, 168, 254, 0.45);
    box-shadow:
        0 0 0 1px rgba(110, 168, 254, 0.25),
        0 0 30px rgba(110, 168, 254, 0.08);
}
.content .scope .row.pick h4::after {
    content: " ← retenu";
    color: var(--sys);
    font-weight: 500;
}

/* Diagrammes (SVG intégrés) */
.content .diagram {
    background: #0b0f16;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 1.5rem 1.2rem 1.3rem;
    margin: 1.9rem 0;
    overflow-x: auto;
}
.content .diagram svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.content .diagram svg text,
.content .tmx svg text {
    font-family: var(--mono-font);
}
.content .diagram .dtitle {
    font-family: var(--mono-font);
    font-size: 1.06rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mut);
    margin: 0 0 1.2rem;
    text-align: center;
}
.content .diagram .dcap {
    font-family: var(--mono-font);
    font-size: 1.15rem;
    color: var(--mut);
    text-align: center;
    margin: 1.2rem auto 0;
    max-width: 52ch;
    line-height: 1.65;
    letter-spacing: 0.01em;
}
.content .diagram .dcap b {
    color: var(--body);
    font-weight: 500;
}

/* Petites multiples de tenancy */
.content .tenancy-multiples {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.9rem 0;
}
.content .tmx {
    flex: 1 1 190px;
    max-width: 228px;
    background: #0b0f16;
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 1.1rem 0.9rem 1.2rem;
}
.content .tmx svg {
    display: block;
    width: 100%;
    height: auto;
}
.content .tmx .tt {
    font-family: var(--mono-font);
    font-size: 1.25rem;
    color: var(--head);
    margin: 0.85rem 0 0.3rem;
    font-weight: 600;
}
.content .tmx .td {
    font-size: 1.31rem;
    color: var(--body);
    line-height: 1.5;
}
.content .tmx .pill {
    display: inline-block;
    font-family: var(--mono-font);
    font-size: 0.96rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.65rem;
}
.content .tmx.pick {
    border-color: rgba(110, 168, 254, 0.45);
    box-shadow:
        0 0 0 1px rgba(110, 168, 254, 0.22),
        0 0 26px rgba(110, 168, 254, 0.07);
}
.content .pill.iso {
    color: var(--mut);
    background: rgba(126, 138, 160, 0.13);
}
.content .pill.rec {
    color: var(--sys);
    background: var(--sys-dim);
}
.content .pill.glob {
    color: var(--risk);
    background: var(--risk-dim);
}

/* ---- Page de titre (index) ---- */
.content .thesis {
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    color: var(--lede);
    line-height: 1.5;
    max-width: 40ch;
    font-weight: 400;
    margin: 1.4rem 0 2rem;
}
.content .thesis b {
    color: var(--head);
    font-weight: 600;
}
.content .codename {
    display: inline-block;
    font-family: var(--mono-font);
    font-size: 1.09rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--key);
    border: 1px solid var(--key-dim);
    background: var(--key-dim);
    padding: 0.25rem 0.55rem;
    border-radius: 5px;
}
.content .legend {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hair-soft);
}
.content .legend .li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono-font);
    font-size: 1.18rem;
    letter-spacing: 0.04em;
    color: var(--mut);
}
.content .legend .sw {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 11px;
}
.content .legend .sw.s {
    background: var(--sys);
}
.content .legend .sw.k {
    background: var(--key);
}
.content .legend .sw.r {
    background: var(--risk);
}
.content .legend b {
    color: var(--body);
    font-weight: 500;
}
.content .fp-fingerprint {
    font-family: var(--mono-font);
    font-size: 1.31rem;
    color: var(--mut);
    word-break: break-all;
}

/* ---- Tableaux (composant introduit avec la section A) ---- */
.content thead th {
    font-family: var(--mono-font);
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mut);
    font-weight: 600;
}
.content td,
.content th {
    padding: 0.5rem 0.85rem;
}

/* ---- Divers ---- */
.content blockquote {
    border-inline-start: 2px solid var(--sys);
    color: var(--lede);
}