:root{
  --primary:#245b55;
  --secondary:#713f50;
  --surface:#ffffff;
  --shadow:none;
  --accent:#916b14;
  --bg:#f5f3ed;
  --text:#252b29;
  --radius:12px;
  --container:1040px;
  --font-heading:'Alegreya Sans',Georgia,serif;
  --font-body:'Atkinson Hyperlegible',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.65;font-size:17px}
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
h1,h2,h3{font-family:var(--font-heading);line-height:1.2;color:var(--primary)}
h1{font-size:2.1rem;margin:.4em 0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{text-align:center;padding:2.5rem 0 1.5rem}
.site-header nav ul,.site-header nav{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;list-style:none;margin:.75rem 0 0;padding:0}
.site-header:has(.header-inner){padding:0;background:none;border:0;display:block}
.site-header .header-inner{text-align:center;padding:2.5rem 0 1.5rem}
.site-header .header-inner nav ul,.site-header .header-inner nav{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;list-style:none;margin:.75rem 0 0;padding:0}
.brand{font-family:'Alegreya Sans',Georgia,serif;font-size:1.4rem;font-weight:700;display:inline-flex;align-items:center}
.brand--logo{padding:.2rem 0}
.brand-logo{display:block;height:clamp(34px,4vw,52px);width:auto}
.post-list{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.post-list-compact{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.post-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb, var(--text) 15%, transparent);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.post-card-media{display:block;aspect-ratio:16/9;overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card-body{padding:1.1rem}
.post-card h2 a,h2{color:var(--secondary)}
.post-card h2{margin:0 0 .35rem;font-size:1.2rem}
.post-kicker{display:inline-block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.post-excerpt{margin:.25rem 0 .6rem;font-size:.95rem;opacity:.85}
.post-meta{font-size:.85rem;opacity:.7}
article img{max-width:100%;height:auto;border-radius:var(--radius)}
article{margin:1.5rem 0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;border-radius:var(--radius)}
.btn{display:inline-block;padding:.6rem 1.1rem;font-weight:600;cursor:pointer;text-decoration:none;background:var(--primary);color:var(--bg);border:0;border-radius:var(--radius)}
.btn:hover{text-decoration:none;opacity:.9}
.breadcrumb{margin:1.25rem 0 .5rem;font-size:.85rem;opacity:.8}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:.4rem;opacity:.6}
.section{margin:3rem 0}
.section-title{font-size:1.5rem;margin:0 0 1rem;color:var(--secondary)}
.hero{display:grid;gap:1.5rem;align-items:center;margin:1.5rem 0 3rem}
.hero.has-media{grid-template-columns:1.1fr 1fr}
@media (max-width:760px){.hero.has-media{grid-template-columns:1fr}}
.hero-media img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.hero h1{font-size:2.4rem;margin:0 0 .4em}
.hero-tagline{font-size:1.15rem;opacity:.85;margin:0 0 .8rem}
.cat-grid{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.cat-card a{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);border:1px solid color-mix(in srgb, var(--text) 12%, transparent);color:var(--text)}
.cat-card a:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s ease}
.cat-media{display:block;aspect-ratio:4/3;overflow:hidden}
.cat-media img{width:100%;height:100%;object-fit:cover;display:block}
.cat-name{padding:.85rem 1rem .2rem;font-family:'Alegreya Sans',Georgia,serif;font-weight:700;color:var(--primary)}
.cat-desc{padding:0 1rem 1rem;font-size:.9rem;opacity:.8}
.page-head{margin:1rem 0 1.5rem}
.page-head.has-media{display:grid;gap:1.5rem;grid-template-columns:1fr 1.2fr;align-items:center}
@media (max-width:760px){.page-head.has-media{grid-template-columns:1fr}}
.page-head-media img,.page-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.single-head{margin:1rem 0 1.5rem}
.single-media{margin:0 0 1.5rem}
.single-media img{width:100%;max-height:460px;object-fit:cover}
.single-content{font-size:1.05rem}
.single-content h2{margin-top:1.8em}
.author-box{display:flex;gap:1rem;align-items:flex-start;margin:1.5rem 0;padding:1rem;border-radius:var(--radius);background:var(--surface);border:1px solid color-mix(in srgb, var(--text) 12%, transparent)}
.author-avatar{border-radius:999px}
.author-name{margin:0;font-weight:700;color:var(--secondary)}
.author-bio{margin:.25rem 0 0;font-size:.92rem;opacity:.85}
.pagination ul{display:flex;gap:.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:1.5rem 0}
.pagination .page-numbers{display:inline-block;padding:.45rem .8rem;border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--text) 18%, transparent)}
.pagination .page-numbers.current{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.notfound{display:grid;gap:1.5rem;grid-template-columns:1fr 1.1fr;align-items:center;margin:3rem 0}
@media (max-width:760px){.notfound{grid-template-columns:1fr}}
.notfound-media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.notfound-links{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:1rem 0 0}
.search-form{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0}
.search-form input[type=search]{flex:1;min-width:200px;padding:.6rem .8rem;border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--text) 25%, transparent);background:var(--bg);color:var(--text);font:inherit}
.screen-reader-text{position:absolute;left:-9999px}
.site-footer{margin:3rem 0 2rem;padding-top:1.25rem;border-top:1px solid color-mix(in srgb, var(--text) 15%, transparent);font-size:.9rem;opacity:.85}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.site-footer nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.footer-legal{width:100%;margin:.5rem 0 0;opacity:.7}
/* ---- Mise en page issue de la conception des gabarits ---- */
body{font-size:17px}
h1{font-size:2.1rem}
.hero h1{font-size:2.40rem}
.post-card{border:1px solid color-mix(in srgb, var(--text) 15%, transparent);box-shadow:none;background:var(--surface)}





.hero{grid-template-columns:1fr}
.hero-body{min-width:0}
.cols-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.single--etroite .single-content,.single--moyenne .single-content,.single--etroite .single-head,.single--moyenne .single-head,.single--etroite .single-lede,.single--moyenne .single-lede{max-width:780px;margin-inline:auto}
.page-article.single--etroite .single-content,.page-article.single--moyenne .single-content{max-width:780px;margin-inline:auto}
.single-lede{font-size:1.15rem;opacity:.85;margin:.4rem 0 .8rem}
.featured-card{display:grid;gap:1.5rem;border-radius:var(--radius);overflow:hidden;border:1px solid color-mix(in srgb, var(--text) 15%, transparent);box-shadow:none;background:var(--surface)}
.featured-card.has-media{grid-template-columns:1.2fr 1fr;align-items:center}
@media (max-width:760px){.featured-card.has-media{grid-template-columns:1fr}}
.featured-media img{width:100%;height:100%;max-height:420px;object-fit:cover;display:block}
.featured-body{padding:1.5rem}
.featured-body h2{margin:.2rem 0 .5rem;font-size:1.6rem}
.featured-label{margin:0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.cat-head{margin:1rem 0 1.5rem}
.cat-head-label{margin:0 0 .2rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.cat-head-desc{opacity:.85}
.cat-head-count{font-size:.85rem;opacity:.65;margin:.4rem 0 0}
.selection-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.selection-more{font-size:.9rem}
.editorial-inner{padding:1.75rem;border-radius:var(--radius);background:color-mix(in srgb, var(--primary) 7%, var(--bg))}
.editorial-body{max-width:70ch;opacity:.9}
.hero-intro{max-width:66ch;opacity:.9}
.toc{margin:1.5rem auto;max-width:780px;padding:1rem 1.25rem;border-radius:var(--radius);background:var(--surface);border:1px solid color-mix(in srgb, var(--text) 12%, transparent)}
.toc-title{margin:0 0 .4rem;font-weight:700;font-size:.95rem}
.toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.25rem;font-size:.95rem}
.page-head--aplat{padding:1.5rem;border-radius:var(--radius);background:color-mix(in srgb, var(--primary) 8%, var(--bg))}
/* ---- Direction artistique écrite par l'IA (prime sur le socle) ---- */
/* ==========================================================================
   MA BASKET — LE CARNET DE TERRAIN
   Périmètre exclusif : .site-main
   ========================================================================== */

/* 01 — Socle local et dimensions
   -------------------------------------------------------------------------- */

.site-main {
    --container: 1040px;
    --radius: 12px;
    --shadow: none;
    --mb-wide: 1440px;
    --mb-gutter: clamp(20px, 4.45vw, 64px);
    --mb-gap: 32px;
    --mb-section-space: clamp(56px, 7.2vw, 104px);
    --mb-sticky-offset: 112px;
    --mb-rule: color-mix(in srgb, var(--primary) 24%, var(--bg));
    --mb-rule-light: color-mix(in srgb, var(--primary) 14%, var(--bg));
    --mb-note-bg: color-mix(in srgb, var(--primary) 7%, var(--bg));

    display: block;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    text-align: start;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
}

.site-main *,
.site-main *::before,
.site-main *::after {
    box-sizing: border-box;
}

.site-main :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
}

.site-main :where(article, section, aside, nav, figure, form) {
    min-width: 0;
    box-shadow: none;
}

.site-main :where(h1, h2, h3, h4, h5, h6) {
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-weight: 800;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-transform: none;
    text-wrap: balance;
}

.site-main :where(h1, h2, h3, h4, [id]) {
    scroll-margin-top: calc(var(--mb-sticky-offset) + 24px);
}

.site-main :where(p, li, dd, figcaption) {
    text-wrap: pretty;
}

.site-main :where(a) {
    color: var(--primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
}

.site-main :where(a:hover) {
    text-decoration-thickness: 2px;
}

.site-main :where(button, input, select, textarea) {
    max-width: 100%;
    color: var(--text);
    font: inherit;
}

.site-main :where(button, input[type="submit"], input[type="button"]) {
    cursor: pointer;
}

.site-main :where(img, video, iframe, svg) {
    max-width: 100%;
}

.site-main :where(img) {
    display: block;
    height: auto;
}

.site-main :where(hr) {
    height: 0;
    margin-block: 40px;
    border: 0;
    border-top: 1px solid var(--mb-rule);
}

.site-main ::selection {
    background: var(--primary);
    color: var(--surface);
}

.site-main .mb-wide {
    width: 100%;
    max-width: var(--mb-wide);
    margin-inline: auto;
    padding-inline: var(--mb-gutter);
}

.site-main .mb-reading-width,
.site-main .mb-article-layout,
.site-main .mb-page-layout {
    width: calc(100% - var(--mb-gutter) - var(--mb-gutter));
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 0;
}

.site-main .mb-wide .mb-reading-width {
    width: 100%;
}

.site-main .mb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mb-gap);
}

.site-main .mb-grid > *,
.site-main .mb-row-link > *,
.site-main .mb-feature-link > *,
.site-main .mb-article-layout > *,
.site-main .mb-page-layout > *,
.site-main .mb-search-controls > * {
    min-width: 0;
}

/* 02 — Repères, titres et commandes
   -------------------------------------------------------------------------- */

.site-main .mb-kicker {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    color: var(--primary);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.site-main .mb-kicker::before {
    content: "";
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 13px;
    border-inline: 2px solid currentColor;
}

.site-main .mb-section-heading {
    margin: 0;
    font-size: clamp(34px, 3.6vw, 48px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.site-main .mb-section-top {
    display: grid;
    gap: 16px;
    margin-bottom: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--primary);
}

.site-main .mb-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: fit-content;
    max-width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 14px 22px;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--surface);
    box-shadow: none;
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-align: start;
    text-transform: none;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.site-main .mb-button:hover {
    border-color: color-mix(in srgb, var(--primary) 85%, var(--text));
    background: color-mix(in srgb, var(--primary) 85%, var(--text));
    color: var(--surface);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.site-main .mb-button [aria-hidden="true"],
.site-main .mb-text-link [aria-hidden="true"] {
    flex: 0 0 auto;
    text-decoration: none;
}

.site-main .mb-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    color: var(--primary);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.site-main .mb-text-link:hover {
    text-decoration-thickness: 2px;
}

.site-main .mb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}

.site-main .mb-meta {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
}

.site-main .mb-meta-category,
.site-main .mb-meta-category-link {
    color: var(--primary);
    font-weight: 700;
}

.site-main .mb-meta-category {
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.site-main .mb-meta-separator {
    padding-inline: 4px;
}

.site-main .mb-meta time,
.site-main .mb-meta-reading,
.site-main .mb-row-number,
.site-main .mb-topic-number,
.site-main .mb-step-number {
    font-variant-numeric: tabular-nums;
}

.site-main .mb-excerpt {
    max-width: 60ch;
    margin-top: 16px;
    color: var(--text);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
}

/* 03 — Photographies documentaires, légendes hors image
   -------------------------------------------------------------------------- */

.site-main .mb-photo {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.site-main .mb-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--mb-note-bg);
    object-fit: cover;
    object-position: 50% 50%;
    box-shadow: none;
}

.site-main .mb-post-photo img {
    aspect-ratio: 16 / 10;
}

.site-main .mb-hero-figure img {
    aspect-ratio: 3 / 2;
}

.site-main .mb-category-photo img,
.site-main .mb-contact-photo img {
    aspect-ratio: 4 / 3;
}

.site-main .mb-fit-photo img,
.site-main .mb-notfound-photo img {
    aspect-ratio: 1;
}

.site-main .mb-photo-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 12px;
    padding: 0;
    color: var(--text);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: start;
}

.site-main .mb-caption-label {
    font-size: 14px;
    letter-spacing: 0.025em;
}

.site-main .mb-photo--contain img {
    object-fit: contain;
}

/* 04 — Accueil
   La spécificité locale préserve cette direction face au style du gabarit.
   -------------------------------------------------------------------------- */

.site-main .mb-home.mb-home {
    min-width: 0;
    padding-bottom: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.65;
}

.site-main .mb-home.mb-home .mb-wide {
    width: 100%;
    max-width: var(--mb-wide);
    padding-inline: var(--mb-gutter);
}

.site-main .mb-home.mb-home .mb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mb-gap);
}

.site-main .mb-home.mb-home .mb-home-opening {
    align-items: center;
    padding-top: clamp(40px, 5.6vw, 80px);
    padding-bottom: var(--mb-section-space);
    row-gap: 40px;
}

.site-main .mb-home.mb-home .mb-manifesto > .mb-kicker {
    max-width: 45ch;
}

.site-main .mb-home.mb-home .mb-home-title {
    max-width: none;
    margin-block: 24px 32px;
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-size: clamp(54px, 10vw, 70px);
    font-weight: 900;
    font-style: normal;
    line-height: 0.94;
    letter-spacing: -0.045em;
    text-transform: none;
}

.site-main .mb-home.mb-home .mb-title-line {
    display: block;
}

.site-main .mb-home.mb-home .mb-home-intro {
    max-width: 47ch;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.6;
}

.site-main .mb-home.mb-home .mb-home-intro > * + * {
    margin-top: 16px;
}

.site-main .mb-home.mb-home .mb-actions {
    gap: 16px 28px;
    margin-top: 32px;
}

.site-main .mb-home.mb-home .mb-hero-figure {
    align-self: end;
    margin: 0;
}

.site-main .mb-home.mb-home .mb-hero-figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

.site-main .mb-home.mb-home .mb-hero-figure .mb-photo-caption {
    padding-top: 12px;
    border-top: 1px solid var(--mb-rule);
}

.site-main .mb-home.mb-home .mb-section-heading {
    font-size: clamp(34px, 3.6vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.site-main .mb-home.mb-home .mb-section-top {
    display: grid;
    gap: 16px;
    margin-bottom: 40px;
    padding-top: 24px;
    border-top: 2px solid var(--primary);
}

/* Index sans images : quatre entrées, un seul système de filets. */

.site-main .mb-topic-index,
.site-main .mb-home.mb-home .mb-topic-index {
    padding-block: clamp(48px, 6vw, 88px);
    border-block: 1px solid var(--mb-rule-light);
    background: var(--surface);
    scroll-margin-top: calc(var(--mb-sticky-offset) + 24px);
}

.site-main .mb-topic-heading .mb-section-heading,
.site-main .mb-home.mb-home .mb-topic-heading .mb-section-heading {
    max-width: 15ch;
    margin-top: 20px;
}

.site-main .mb-topic-list,
.site-main .mb-home.mb-home .mb-topic-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main .mb-topic-list > li {
    margin: 0;
    padding: 0;
}

.site-main .mb-topic-row,
.site-main .mb-home.mb-home .mb-topic-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 8px 16px;
    min-height: 112px;
    padding-block: 24px;
    border-top: 1px solid color-mix(in srgb, var(--primary) 26%, var(--surface));
    color: var(--text);
    text-decoration: none;
    transition: background-color 160ms ease;
}

.site-main .mb-topic-list > li:last-child .mb-topic-row {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 26%, var(--surface));
}

.site-main .mb-topic-row:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.site-main .mb-topic-number {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    color: var(--primary);
    font-size: 14px;
}

.site-main .mb-topic-name,
.site-main .mb-home.mb-home .mb-topic-name {
    grid-column: 2;
    grid-row: 1;
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-size: clamp(30px, 2.8vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.site-main .mb-topic-question {
    grid-column: 2;
    grid-row: 2;
    color: var(--text);
    font-size: 17px;
    line-height: 1.5;
}

.site-main .mb-topic-arrow {
    grid-column: 3;
    grid-row: 1 / span 2;
    color: var(--primary);
    font-size: 26px;
    line-height: 1;
}

.site-main .mb-topic-row:hover .mb-topic-name {
    text-decoration-thickness: 2px;
}

.site-main .mb-home.mb-home .mb-latest {
    padding-block: var(--mb-section-space);
    scroll-margin-top: calc(var(--mb-sticky-offset) + 24px);
}

.site-main .mb-home.mb-home .mb-latest-grid {
    align-items: start;
    row-gap: 40px;
}

.site-main .mb-home.mb-home .mb-latest-side {
    min-width: 0;
    padding-left: 0;
}

/* Bande pratique inversée, sans texte sur les photographies. */

.site-main .mb-home.mb-home .mb-fit-note {
    padding-block: clamp(48px, 6.2vw, 88px);
    background: var(--primary);
    color: var(--surface);
}

.site-main .mb-home.mb-home .mb-fit-grid {
    align-items: start;
    row-gap: 40px;
}

.site-main .mb-home.mb-home .mb-fit-photo {
    grid-row: auto;
    width: 100%;
    max-width: none;
}

.site-main .mb-home.mb-home .mb-fit-copy {
    grid-row: auto;
    padding-left: 0;
}

.site-main .mb-home.mb-home .mb-fit-photo img {
    aspect-ratio: 1;
    object-fit: cover;
}

.site-main .mb-home.mb-home .mb-fit-note :where(
    .mb-kicker,
    .mb-section-heading,
    .mb-photo-caption,
    .mb-text-link,
    h3,
    p
) {
    color: var(--surface);
}

.site-main .mb-home.mb-home .mb-fit-note a {
    color: var(--surface);
}

.site-main .mb-home.mb-home .mb-fit-copy > .mb-section-heading {
    max-width: 19ch;
    margin-top: 20px;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
}

.site-main .mb-home.mb-home .mb-fit-steps {
    margin-top: 32px;
    padding: 0;
    list-style: none;
}

.site-main .mb-home.mb-home .mb-fit-steps > li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding-block: 20px;
    border-top: 1px solid color-mix(in srgb, var(--surface) 32%, var(--primary));
}

.site-main .mb-home.mb-home .mb-step-number {
    padding-top: 4px;
    color: var(--surface);
    font-size: 14px;
    line-height: 1.5;
}

.site-main .mb-home.mb-home .mb-fit-steps h3 {
    margin-bottom: 8px;
    color: var(--surface);
    font-size: clamp(25px, 2.3vw, 28px);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.site-main .mb-home.mb-home .mb-fit-steps p {
    max-width: 60ch;
    font-size: 18px;
    line-height: 1.65;
}

.site-main .mb-home.mb-home .mb-fit-copy > .mb-text-link {
    margin-top: 16px;
}

.site-main .mb-home.mb-home .mb-editorial-note {
    align-items: start;
    padding-block: var(--mb-section-space);
}

.site-main .mb-home.mb-home .mb-editorial-heading .mb-kicker {
    margin-bottom: 24px;
}

.site-main .mb-home.mb-home .mb-editorial-title {
    max-width: 20ch;
    font-size: clamp(38px, 4.5vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.site-main .mb-home.mb-home .mb-editorial-copy {
    margin-top: 0;
    padding-top: 24px;
    border-top: 3px solid var(--accent);
}

.site-main .mb-home.mb-home .mb-editorial-copy p + p {
    margin-top: 16px;
}

.site-main .mb-home.mb-home .mb-editorial-copy > .mb-text-link {
    margin-top: 24px;
}

/* 05 — Une grande une, puis des sujets typographiques
   -------------------------------------------------------------------------- */

.site-main .mb-feature,
.site-main .mb-archive-lead,
.site-main .mb-story-row,
.site-main .mb-reading-row {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.site-main .mb-feature-link {
    display: block;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.site-main .mb-feature-copy {
    min-width: 0;
    padding-top: 24px;
}

.site-main .mb-feature-title,
.site-main .mb-home.mb-home .mb-feature-title {
    margin-block: 12px 0;
    color: var(--primary);
    font-size: clamp(32px, 3.3vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.site-main .mb-feature-action {
    margin-top: 16px;
    color: var(--primary);
    font-size: 16px;
}

.site-main .mb-feature--text-only .mb-feature-copy {
    padding-top: 24px;
    border-top: 3px solid var(--primary);
}

.site-main .mb-feature-link:hover,
.site-main .mb-row-link:hover {
    color: var(--text);
    text-decoration: none;
}

.site-main .mb-feature-link:hover .mb-feature-title,
.site-main .mb-row-link:hover .mb-row-title {
    text-decoration-thickness: 2px;
}

.site-main .mb-row-link {
    display: block;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
}

.site-main .mb-row-title,
.site-main .mb-home.mb-home .mb-row-title {
    margin-block: 8px 12px;
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-size: clamp(25px, 2.5vw, 28px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.012em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.site-main .mb-row-number {
    padding-top: 2px;
    color: var(--primary);
    font-size: 14px;
    line-height: 1.65;
}

.site-main .mb-row-arrow {
    color: var(--primary);
    font-size: 24px;
    line-height: 1.25;
}

.site-main .mb-story-row {
    border-top: 1px solid var(--mb-rule);
}

.site-main .mb-story-row:last-child {
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-story-row .mb-row-link,
.site-main .mb-reading-row .mb-row-link,
.site-main .mb-home.mb-home .mb-story-row .mb-row-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    align-items: start;
    gap: 16px;
    min-height: 44px;
    padding-block: 28px;
    color: var(--text);
    text-decoration: none;
}

.site-main .mb-story-row .mb-row-link:hover,
.site-main .mb-reading-row .mb-row-link:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--bg));
}

/* 06 — Fil d’Ariane et navigation de rubrique
   -------------------------------------------------------------------------- */

.site-main .mb-breadcrumb {
    padding-top: 24px;
    padding-bottom: 32px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.site-main .mb-breadcrumb :where(nav, p) {
    margin: 0;
    padding: 0;
    font: inherit;
}

.site-main .mb-breadcrumb :where(ol, ul) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main .mb-breadcrumb li {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.site-main .mb-breadcrumb a {
    display: inline-block;
    padding-block: 4px;
    color: var(--primary);
}

.site-main .mb-breadcrumb [aria-current="page"] {
    color: var(--text);
    font-weight: 700;
}

.site-main .mb-category-switcher {
    width: 100%;
    margin-block: 0 40px;
    padding-block: 16px;
    border-block: 1px solid var(--mb-rule);
}

.site-main > .mb-category-switcher {
    width: calc(100% - var(--mb-gutter) - var(--mb-gutter));
    max-width: var(--container);
    margin-inline: auto;
}

.site-main .mb-category-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main .mb-category-links > li {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.site-main .mb-category-links .mb-text-link {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 5px;
    padding-block: 8px;
}

.site-main .mb-category-links [aria-current="page"],
.site-main .mb-text-link--current {
    font-weight: 700;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.25em;
}

.site-main .mb-current-label {
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* 07 — Rubriques, archives et listes détaillées
   -------------------------------------------------------------------------- */

.site-main .mb-archive-opening {
    align-items: center;
    padding-top: 16px;
    padding-bottom: clamp(48px, 6vw, 88px);
    row-gap: 32px;
}

.site-main .mb-archive-title {
    margin-block: 20px 24px;
    font-size: clamp(56px, 8.4vw, 112px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.site-main .mb-archive-copy > :where(p:not(.mb-kicker), .mb-archive-description),
.site-main .mb-archive-description {
    max-width: 50ch;
    font-size: clamp(18px, 1.7vw, 21px);
    line-height: 1.6;
}

.site-main .mb-archive-copy > div > p + p,
.site-main .mb-archive-description > * + * {
    margin-top: 16px;
}

.site-main .mb-archive-copy > div:not(.mb-actions) {
    max-width: 52ch;
}

.site-main .mb-category-photo {
    align-self: end;
}

.site-main .mb-archive-list {
    margin-bottom: var(--mb-section-space);
}

.site-main .mb-archive-lead {
    padding-block: 0 48px;
}

.site-main .mb-archive-lead .mb-feature-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

.site-main .mb-archive-lead .mb-feature-copy {
    padding-top: 0;
}

.site-main .mb-archive-lead .mb-feature-title {
    font-size: clamp(32px, 3.4vw, 44px);
}

.site-main .mb-archive-lead.mb-feature--text-only .mb-feature-copy {
    max-width: 760px;
    padding-top: 24px;
}

.site-main .mb-archive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0;
    padding-block: 32px;
    border-top: 1px solid var(--mb-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.site-main .mb-archive-row:last-of-type {
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-archive-row .mb-row-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 0;
}

.site-main .mb-archive-row .mb-post-photo img {
    aspect-ratio: 3 / 2;
}

.site-main .mb-archive-row .mb-row-title {
    margin-bottom: 0;
    font-size: clamp(28px, 2.8vw, 34px);
    line-height: 1.12;
}

.site-main .mb-archive-row .mb-excerpt {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.65;
}

.site-main .mb-row-details {
    min-width: 0;
}

.site-main .mb-row-details .mb-kicker {
    margin-bottom: 12px;
}

.site-main .mb-row-details .mb-meta {
    font-size: 14px;
    line-height: 1.6;
}

/* 08 — Pagination native et états vides
   -------------------------------------------------------------------------- */

.site-main .mb-pagination {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 2px solid var(--primary);
}

.site-main .mb-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main .mb-pagination li {
    margin: 0;
    padding: 0;
}

.site-main .mb-pagination .page-numbers:not(ul),
.site-main .mb-page-links > a,
.site-main .mb-page-links > span:not(.mb-page-links-label) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: none;
    color: var(--primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: underline;
    font-variant-numeric: tabular-nums;
}

.site-main .mb-pagination .current,
.site-main .mb-page-links > .post-page-numbers.current {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
    text-decoration-thickness: 2px;
}

.site-main .mb-pagination a:hover,
.site-main .mb-page-links > a:hover {
    background: var(--mb-note-bg);
    text-decoration-thickness: 2px;
}

.site-main .mb-pagination .dots {
    min-width: 24px;
    padding-inline: 4px;
    border-color: transparent;
    color: var(--text);
    font-weight: 400;
    text-decoration: none;
}

.site-main .mb-page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--mb-rule);
}

.site-main .mb-page-links-label {
    margin-inline-end: 8px;
    font-size: 16px;
}

.site-main .mb-empty {
    margin-block: 24px;
    padding: clamp(24px, 4vw, 40px);
    border: 0;
    border-inline-start: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--mb-note-bg);
    box-shadow: none;
}

.site-main .mb-empty h2 {
    max-width: 28ch;
    margin-bottom: 16px;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12;
}

.site-main .mb-empty p {
    max-width: 65ch;
}

.site-main .mb-empty p + p {
    margin-top: 16px;
}

.site-main .mb-empty .mb-category-switcher {
    margin-block: 24px 0;
    padding-block: 16px 0;
    border-bottom: 0;
}

.site-main .mb-topic-index .mb-empty {
    margin-block: 0;
}

/* 09 — Ouverture d’article et colonne de lecture
   -------------------------------------------------------------------------- */

.site-main .mb-article-header {
    padding-top: 16px;
    padding-bottom: clamp(32px, 4.5vw, 64px);
}

.site-main .mb-article-header h1,
.site-main .mb-article-title {
    max-width: 24ch;
    margin-block: 20px 24px;
    color: var(--primary);
    font-size: clamp(40px, 5.6vw, 76px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.site-main .mb-article-header > p:not(.mb-meta):not(.mb-kicker),
.site-main .mb-article-header .mb-article-intro,
.site-main .mb-article-header .mb-chapo {
    max-width: 64ch;
    margin-top: 24px;
    font-size: clamp(20px, 1.9vw, 24px);
    line-height: 1.5;
}

.site-main .mb-article-header > .mb-meta {
    max-width: 100%;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--mb-rule);
    line-height: 1.9;
}

.site-main .mb-article-figure {
    width: calc(100% - var(--mb-gutter) - var(--mb-gutter));
    max-width: calc(var(--mb-wide) - var(--mb-gutter) - var(--mb-gutter));
    margin-inline: auto;
    margin-bottom: clamp(40px, 5.6vw, 80px);
}

.site-main .mb-wide .mb-article-figure {
    width: 100%;
    max-width: none;
}

.site-main .mb-article-figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.site-main .mb-article-layout,
.site-main .mb-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: var(--mb-section-space);
}

.site-main .mb-article-body,
.site-main .mb-article-aside {
    min-width: 0;
}

.site-main .mb-article-body > .mb-prose {
    width: 100%;
    max-width: 680px;
}

.site-main .mb-toc {
    padding: 24px;
    border-top: 3px solid var(--primary);
    border-bottom: 1px solid var(--mb-rule);
    border-radius: 0;
    background: var(--mb-note-bg);
}

.site-main .mb-toc-title {
    margin: 0 0 16px;
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.site-main .mb-toc-list {
    margin: 0;
    padding-inline-start: 24px;
    list-style: decimal-leading-zero;
}

.site-main .mb-toc-list li {
    margin: 0;
    padding-inline-start: 6px;
    border-top: 1px solid var(--mb-rule-light);
    font-size: 16px;
    line-height: 1.5;
}

.site-main .mb-toc-list li::marker {
    color: var(--primary);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.site-main .mb-toc-list li:first-child {
    border-top: 0;
}

.site-main .mb-toc-list a {
    display: block;
    min-height: 44px;
    padding-block: 12px;
    text-decoration-thickness: 1px;
}

.site-main .mb-toc-list a:hover {
    text-decoration-thickness: 2px;
}

.site-main .mb-correction-note {
    margin-top: 48px;
    padding-block: 24px;
    border-block: 1px solid var(--mb-rule);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
}

.site-main .mb-correction-note p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 24px;
}

.site-main .mb-correction-note strong {
    font-weight: 700;
}

.site-main .mb-correction-note .mb-text-link {
    font-size: 16px;
}

/* 10 — Prose : lisibilité, sources, listes et contenus WordPress
   -------------------------------------------------------------------------- */

.site-main .mb-prose {
    min-width: 0;
    color: var(--text);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.site-main .mb-prose > * + * {
    margin-top: 24px;
}

.site-main .mb-prose > :first-child {
    margin-top: 0;
}

.site-main .mb-prose > :last-child {
    margin-bottom: 0;
}

.site-main .mb-prose p {
    margin-bottom: 0;
}

.site-main .mb-prose h2 {
    margin-top: 56px;
    margin-bottom: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--mb-rule);
    color: var(--primary);
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.site-main .mb-prose h3 {
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--primary);
    font-size: clamp(25px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.012em;
}

.site-main .mb-prose h4 {
    margin-top: 28px;
    margin-bottom: 12px;
    color: var(--primary);
    font-size: clamp(22px, 2vw, 25px);
    line-height: 1.2;
    letter-spacing: 0;
}

.site-main .mb-prose :where(h5, h6) {
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: 0;
}

.site-main .mb-prose > h2:first-child {
    padding-top: 0;
    border-top: 0;
}

.site-main .mb-prose :where(h2, h3, h4) + * {
    margin-top: 0;
}

.site-main .mb-prose strong {
    color: var(--text);
    font-weight: 700;
}

.site-main .mb-prose a:not(.mb-button) {
    color: var(--primary);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.site-main .mb-prose a:not(.mb-button):hover {
    text-decoration-thickness: 2px;
}

.site-main .mb-prose :where(ul, ol) {
    margin-bottom: 0;
    padding-inline-start: 28px;
}

.site-main .mb-prose :where(ul, ol) > li {
    margin-block: 8px;
    padding-inline-start: 4px;
}

.site-main .mb-prose li::marker {
    color: var(--primary);
    font-weight: 700;
}

.site-main .mb-prose li > :where(ul, ol) {
    margin-top: 8px;
}

.site-main .mb-prose li > p + p {
    margin-top: 12px;
}

.site-main .mb-prose blockquote {
    margin-inline: 0;
    padding: 8px 0 8px 24px;
    border: 0;
    border-inline-start: 4px solid var(--accent);
    background: none;
    color: var(--text);
    font-size: clamp(20px, 2vw, 23px);
    font-style: normal;
    line-height: 1.55;
}

.site-main .mb-prose blockquote > * + * {
    margin-top: 16px;
}

.site-main .mb-prose blockquote :where(cite, footer) {
    display: block;
    color: var(--text);
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 15px;
    font-style: normal;
    line-height: 1.6;
}

.site-main .mb-prose dl {
    padding-block: 8px;
}

.site-main .mb-prose dt {
    margin-top: 20px;
    color: var(--primary);
    font-weight: 700;
}

.site-main .mb-prose dt:first-child {
    margin-top: 0;
}

.site-main .mb-prose dd {
    margin-top: 8px;
    margin-inline: 0;
}

.site-main .mb-prose :where(small, .wp-element-caption, .wp-caption-text) {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.site-main .mb-prose :where(sup, sub) {
    font-size: 0.8em;
}

.site-main .mb-prose abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

.site-main .mb-prose mark {
    padding-inline: 3px;
    background: color-mix(in srgb, var(--accent) 19%, var(--bg));
    color: var(--text);
}

.site-main .mb-prose :where(code, kbd, samp) {
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--mb-note-bg);
    color: var(--text);
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 0.9em;
}

.site-main .mb-prose pre {
    max-width: 100%;
    overflow-x: auto;
    padding: 24px;
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    tab-size: 4;
    white-space: pre;
}

.site-main .mb-prose pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: inherit;
}

.site-main .mb-prose :where(figure, .wp-caption, .wp-block-image) {
    max-width: 100%;
    margin-inline: 0;
}

.site-main .mb-prose :where(figure, .wp-block-image) img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

.site-main .mb-prose :where(figcaption, .wp-caption-text) {
    margin-top: 12px;
    padding: 0;
    color: var(--text);
    font-size: 14px;
    font-style: normal;
    line-height: 1.55;
    text-align: start;
}

.site-main .mb-prose :where(.alignwide, .alignfull) {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.site-main .mb-prose :where(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin-inline: 0;
}

.site-main .mb-prose .aligncenter {
    margin-inline: auto;
}

.site-main .mb-prose :where(video, iframe) {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.site-main .mb-prose audio {
    width: 100%;
    max-width: 100%;
}

.site-main .mb-prose .wp-block-embed__wrapper {
    min-width: 0;
}

.site-main .mb-prose details {
    padding: 20px 24px;
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: var(--surface);
}

.site-main .mb-prose summary {
    min-height: 44px;
    padding-block: 8px;
    color: var(--primary);
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.site-main .mb-prose details[open] > summary {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-prose details > :not(summary) + * {
    margin-top: 16px;
}

/* Encadrés utiles, jamais des cartes promotionnelles. */

.site-main .mb-answer,
.site-main .mb-caution {
    margin-block: 32px;
    padding: 24px 28px;
    border: 0;
    border-inline-start: 4px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--mb-note-bg);
    color: var(--text);
    box-shadow: none;
}

.site-main .mb-answer > * + *,
.site-main .mb-caution > * + * {
    margin-top: 16px;
}

.site-main .mb-answer > :first-child,
.site-main .mb-caution > :first-child {
    margin-top: 0;
}

.site-main .mb-answer > :last-child,
.site-main .mb-caution > :last-child {
    margin-bottom: 0;
}

.site-main .mb-prose .mb-answer :where(h2, h3),
.site-main .mb-prose .mb-caution :where(h2, h3) {
    margin-top: 0;
    margin-bottom: 16px;
    padding-top: 0;
    border-top: 0;
    font-size: clamp(25px, 2.4vw, 30px);
}

.site-main .mb-caution {
    border-inline-start-color: var(--secondary);
    background: color-mix(in srgb, var(--secondary) 7%, var(--bg));
}

.site-main .mb-caution :where(h2, h3, h4),
.site-main .mb-caution > p:first-child > strong {
    color: var(--secondary);
}

.site-main .mb-prose .mb-checklist {
    padding-inline-start: 28px;
    list-style-type: square;
}

.site-main .mb-checklist > li {
    margin-block: 0;
    padding-block: 12px;
    padding-inline-start: 8px;
    border-bottom: 1px solid var(--mb-rule-light);
}

.site-main .mb-checklist > li:first-child {
    border-top: 1px solid var(--mb-rule-light);
}

/* Tableaux : le défilement reste local au conteneur nommé. */

.site-main .mb-table-scroll,
.site-main .mb-prose .wp-block-table {
    width: 100%;
    max-width: 100%;
    margin-block: 32px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--mb-note-bg);
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: var(--surface);
}

.site-main .mb-prose table,
.site-main .mb-table-scroll table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    line-height: 1.55;
}

.site-main .mb-table-scroll table,
.site-main .mb-prose .wp-block-table table {
    min-width: 580px;
    table-layout: auto;
}

.site-main .mb-prose caption,
.site-main .mb-table-scroll caption {
    padding: 16px 20px;
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
    caption-side: top;
}

.site-main .mb-prose :where(th, td),
.site-main .mb-table-scroll :where(th, td) {
    padding: 16px;
    border: 0;
    border-bottom: 1px solid var(--mb-rule-light);
    vertical-align: top;
    text-align: start;
    overflow-wrap: anywhere;
}

.site-main .mb-prose th,
.site-main .mb-table-scroll th {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    font-weight: 700;
}

.site-main .mb-prose thead th,
.site-main .mb-table-scroll thead th {
    border-bottom: 2px solid var(--primary);
}

.site-main .mb-prose tbody tr:nth-child(even) td,
.site-main .mb-table-scroll tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.site-main .mb-prose tbody tr:last-child > *,
.site-main .mb-table-scroll tbody tr:last-child > * {
    border-bottom: 0;
}

.site-main .mb-table-scroll > figcaption,
.site-main .mb-prose .wp-block-table > figcaption {
    margin: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--mb-rule-light);
}

/* 11 — Fin d’article : une liste de lecture, pas un mur de cartes
   -------------------------------------------------------------------------- */

.site-main .mb-related {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-bottom: var(--mb-section-space);
}

.site-main .mb-related .mb-section-top {
    margin-bottom: 0;
}

.site-main .mb-reading-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-main .mb-reading-list-item {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mb-rule);
}

.site-main .mb-reading-list-item:last-child {
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-reading-row .mb-row-title {
    max-width: 35ch;
    font-size: clamp(27px, 2.7vw, 34px);
    line-height: 1.12;
}

/* 12 — Pages institutionnelles et Contact
   -------------------------------------------------------------------------- */

.site-main .mb-page-header {
    padding-top: 16px;
    padding-bottom: clamp(40px, 6vw, 80px);
    margin-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-page-header h1,
.site-main .mb-page-title {
    max-width: 24ch;
    margin-top: 20px;
    color: var(--primary);
    font-size: clamp(46px, 6.3vw, 88px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.site-main .mb-page-header > p:not(.mb-kicker) {
    max-width: 54ch;
    margin-top: 24px;
    font-size: clamp(20px, 1.9vw, 24px);
    line-height: 1.55;
}

.site-main .mb-page-layout > .mb-prose {
    width: 100%;
    max-width: 680px;
}

.site-main .mb-page-aside {
    padding-top: 16px;
    border-top: 2px solid var(--accent);
    color: var(--primary);
    font-size: 14px;
    line-height: 1.6;
}

.site-main .mb-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-bottom: var(--mb-section-space);
}

.site-main .mb-contact-layout > .mb-prose,
.site-main .mb-contact-copy {
    min-width: 0;
    max-width: 680px;
}

.site-main .mb-contact-photo {
    margin: 0;
}

.site-main .mb-contact-photo img {
    aspect-ratio: 4 / 5;
}

.site-main .mb-contact-layout .mb-empty {
    margin-top: 0;
}

/* 13 — Recherche et contrôles natifs
   -------------------------------------------------------------------------- */

.site-main .mb-search-header {
    padding-top: 16px;
    padding-bottom: 40px;
}

.site-main .mb-search-header h1,
.site-main .mb-search-title {
    max-width: 24ch;
    margin-block: 16px 24px;
    font-size: clamp(42px, 5.8vw, 80px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.site-main .mb-search-header > p:not(.mb-kicker):not(.mb-meta) {
    max-width: 64ch;
    margin-top: 16px;
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.55;
}

.site-main .mb-search-header .mb-search-query {
    overflow-wrap: anywhere;
}

.site-main .mb-search-count {
    margin-top: 16px;
    color: var(--text);
    font-size: 16px;
}

.site-main .mb-search-form {
    width: 100%;
    max-width: 880px;
    margin-block: 24px 40px;
    padding: 24px;
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.site-main .mb-search-label {
    display: block;
    margin-bottom: 12px;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.site-main .mb-search-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
}

.site-main .mb-search-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    box-shadow: none;
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    appearance: auto;
}

.site-main .mb-search-input::placeholder {
    color: var(--text);
    opacity: 1;
}

.site-main .mb-search-submit {
    width: auto;
    min-height: 56px;
}

.site-main .mb-search-results {
    margin-bottom: var(--mb-section-space);
}

.site-main .mb-search-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 0;
    padding-block: 32px;
    border-top: 1px solid var(--mb-rule);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.site-main .mb-search-result:last-of-type {
    border-bottom: 1px solid var(--mb-rule);
}

.site-main .mb-search-result .mb-row-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 0;
}

.site-main .mb-search-result .mb-row-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: clamp(28px, 2.8vw, 36px);
    line-height: 1.12;
}

.site-main .mb-search-result .mb-excerpt {
    margin-top: 12px;
    font-size: 17px;
}

.site-main .mb-search-result .mb-post-photo {
    width: 100%;
    max-width: 280px;
}

.site-main .mb-search-result .mb-post-photo img {
    aspect-ratio: 3 / 2;
}

/* Formulaires réellement fournis par WordPress ou le contenu publié. */

.site-main .mb-prose label {
    display: block;
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

.site-main .mb-prose :where(
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea
) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    font-family: "Atkinson Hyperlegible", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}

.site-main .mb-prose textarea {
    min-height: 176px;
    resize: vertical;
}

.site-main .mb-prose :where(input[type="checkbox"], input[type="radio"]) {
    width: 20px;
    height: 20px;
    margin-inline: 0 8px;
    vertical-align: middle;
    accent-color: var(--primary);
}

.site-main .mb-prose :where(button, input[type="submit"]) {
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid var(--primary);
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--surface);
    box-shadow: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

.site-main .mb-prose :where(button, input[type="submit"]):hover {
    background: color-mix(in srgb, var(--primary) 85%, var(--text));
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-main .mb-prose .post-password-form {
    padding: 24px;
    border: 1px solid var(--mb-rule);
    border-radius: var(--radius);
    background: var(--mb-note-bg);
}

.site-main .mb-prose .post-password-form p + p {
    margin-top: 24px;
}

.site-main .mb-prose .post-password-form input[type="submit"] {
    margin-top: 16px;
}

.site-main :where(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--secondary);
    border-width: 2px;
}

.site-main :where(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

/* 14 — Page introuvable
   -------------------------------------------------------------------------- */

.site-main .mb-notfound {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding-top: 16px;
    padding-bottom: var(--mb-section-space);
}

.site-main .mb-notfound-copy {
    min-width: 0;
}

.site-main .mb-notfound-code,
.site-main .mb-notfound-number,
.site-main .mb-error-code {
    display: block;
    margin-block: 0 24px;
    color: var(--primary);
    font-family: "Alegreya Sans", "Trebuchet MS", sans-serif;
    font-size: clamp(104px, 17vw, 224px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.065em;
    font-variant-numeric: lining-nums tabular-nums;
}

.site-main .mb-notfound h1 {
    max-width: 18ch;
    margin-block: 24px;
    font-size: clamp(40px, 4.8vw, 64px);
    line-height: 1.03;
    letter-spacing: -0.03em;
}

.site-main .mb-notfound-copy > p:not(.mb-kicker):not(.mb-notfound-code):not(.mb-notfound-number):not(.mb-error-code) {
    max-width: 48ch;
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.6;
}

.site-main .mb-notfound .mb-search-form {
    margin-top: 32px;
    margin-bottom: 24px;
}

.site-main .mb-notfound .mb-category-switcher {
    margin-bottom: 0;
}

.site-main .mb-notfound-photo {
    align-self: start;
}

.site-main .mb-notfound-photo img {
    aspect-ratio: 1;
}

/* 15 — Responsive : deux colonnes, puis douze
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
    .site-main .mb-grid,
    .site-main .mb-home.mb-home .mb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-main .mb-home.mb-home .mb-home-title {
        font-size: clamp(54px, 7.2vw, 72px);
    }

    .site-main .mb-home.mb-home .mb-hero-figure img {
        aspect-ratio: 4 / 5;
    }

    .site-main .mb-topic-heading,
    .site-main .mb-topic-links,
    .site-main .mb-topic-index .mb-empty,
    .site-main .mb-home.mb-home .mb-topic-heading,
    .site-main .mb-home.mb-home .mb-topic-links,
    .site-main .mb-home.mb-home .mb-topic-index .mb-empty {
        grid-column: 1 / -1;
    }

    .site-main .mb-topic-heading .mb-section-heading,
    .site-main .mb-home.mb-home .mb-topic-heading .mb-section-heading {
        max-width: 24ch;
    }

    .site-main .mb-topic-row,
    .site-main .mb-home.mb-home .mb-topic-row {
        grid-template-columns: 36px minmax(140px, 0.8fr) minmax(0, 1.4fr) 24px;
        gap: 24px;
    }

    .site-main .mb-topic-question,
    .site-main .mb-home.mb-home .mb-topic-question {
        grid-column: 3;
        grid-row: 1;
    }

    .site-main .mb-topic-arrow,
    .site-main .mb-home.mb-home .mb-topic-arrow {
        grid-column: 4;
        grid-row: 1;
    }

    .site-main .mb-home.mb-home .mb-latest-grid--single .mb-latest-main {
        grid-column: 1 / -1;
    }

    .site-main .mb-home.mb-home .mb-latest-grid--single .mb-feature-link {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: 32px;
    }

    .site-main .mb-home.mb-home .mb-latest-grid--single .mb-feature-copy {
        padding-top: 0;
    }

    .site-main .mb-home.mb-home .mb-latest-grid--single .mb-feature--text-only .mb-feature-copy {
        grid-column: 1 / -1;
        max-width: 780px;
        padding-top: 24px;
    }

    .site-main .mb-home.mb-home .mb-home-opening--text-only .mb-manifesto,
    .site-main .mb-home.mb-home .mb-fit-grid--text-only .mb-fit-copy,
    .site-main .mb-archive-opening--text-only .mb-archive-copy {
        grid-column: 1 / -1;
    }

    .site-main .mb-archive-lead .mb-feature-link {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
    }

    .site-main .mb-archive-lead.mb-feature--text-only .mb-feature-copy {
        grid-column: 1 / -1;
    }

    .site-main .mb-archive-row .mb-row-link {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .site-main .mb-archive-row.mb-row--text-only .mb-row-copy {
        grid-column: 1 / -1;
    }

    .site-main .mb-search-result {
        grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
        gap: 24px;
    }

    .site-main .mb-search-result .mb-row-details .mb-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .site-main .mb-search-result .mb-row-details .mb-meta-separator {
        display: none;
    }

    .site-main .mb-contact-layout,
    .site-main .mb-notfound {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-main .mb-notfound > .mb-search-form,
    .site-main .mb-notfound > .mb-category-switcher {
        grid-column: 1 / -1;
    }
}

@media (min-width: 900px) {
    .site-main .mb-home.mb-home .mb-home-opening {
        padding-top: 64px;
    }

    .site-main .mb-article-header > .mb-meta {
        padding-top: 24px;
    }

    .site-main .mb-reading-row .mb-row-link {
        grid-template-columns: 40px minmax(0, 1fr) 24px;
        gap: 24px;
        padding-block: 32px;
    }

    .site-main .mb-search-form {
        padding: 32px;
    }

    .site-main .mb-notfound .mb-search-form {
        padding: 24px;
    }
}

@media (min-width: 1000px) {
    .site-main .mb-grid,
    .site-main .mb-home.mb-home .mb-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--mb-gap);
    }

    .site-main .mb-home.mb-home .mb-manifesto {
        grid-column: span 7;
    }

    .site-main .mb-home.mb-home .mb-home-title {
        font-size: clamp(100px, 10vw, 144px);
    }

    .site-main .mb-home.mb-home .mb-hero-figure {
        grid-column: span 5;
    }

    .site-main .mb-topic-heading,
    .site-main .mb-home.mb-home .mb-topic-heading {
        grid-column: span 3;
    }

    .site-main .mb-topic-heading .mb-section-heading,
    .site-main .mb-home.mb-home .mb-topic-heading .mb-section-heading {
        max-width: 11ch;
    }

    .site-main .mb-topic-links,
    .site-main .mb-topic-index .mb-empty,
    .site-main .mb-home.mb-home .mb-topic-links,
    .site-main .mb-home.mb-home .mb-topic-index .mb-empty {
        grid-column: span 9;
    }

    .site-main .mb-home.mb-home .mb-latest-main {
        grid-column: span 8;
    }

    .site-main .mb-home.mb-home .mb-latest-side {
        grid-column: span 4;
        padding-left: 8px;
    }

    .site-main .mb-home.mb-home .mb-fit-photo {
        grid-column: span 4;
    }

    .site-main .mb-home.mb-home .mb-fit-copy {
        grid-column: span 8;
        padding-left: 32px;
    }

    .site-main .mb-home.mb-home .mb-fit-grid--text-only .mb-fit-copy {
        padding-left: 0;
    }

    .site-main .mb-home.mb-home .mb-editorial-heading {
        grid-column: span 7;
    }

    .site-main .mb-home.mb-home .mb-editorial-copy {
        grid-column: 9 / span 4;
        margin-top: 8px;
    }

    .site-main .mb-archive-copy {
        grid-column: span 7;
    }

    .site-main .mb-category-photo {
        grid-column: span 5;
    }

    .site-main .mb-archive-opening--text-only .mb-archive-copy {
        grid-column: 1 / -1;
    }

    .site-main .mb-archive-lead .mb-feature-link {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 40px;
    }

    .site-main .mb-archive-row {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
        padding-block: 40px;
    }

    .site-main .mb-archive-row .mb-row-link {
        grid-column: span 10;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 24px;
    }

    .site-main .mb-archive-row .mb-post-photo {
        grid-column: span 3;
    }

    .site-main .mb-archive-row .mb-row-copy {
        grid-column: span 7;
    }

    .site-main .mb-archive-row .mb-row-details {
        grid-column: span 2;
        padding-top: 2px;
    }

    .site-main .mb-archive-row .mb-row-details .mb-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .site-main .mb-archive-row .mb-row-details .mb-meta-separator {
        display: none;
    }

    .site-main .mb-archive-row.mb-row--text-only .mb-row-copy {
        grid-column: 1 / -1;
        max-width: 680px;
    }

    .site-main .mb-article-layout,
    .site-main .mb-page-layout {
        grid-template-columns: 240px minmax(0, 680px);
        column-gap: clamp(40px, 8.34vw, 120px);
        row-gap: 40px;
    }

    .site-main .mb-article-aside {
        align-self: stretch;
    }

    .site-main .mb-toc {
        position: sticky;
        top: var(--mb-sticky-offset);
        max-height: calc(100vh - var(--mb-sticky-offset) - 32px);
        max-height: calc(100dvh - var(--mb-sticky-offset) - 32px);
        overflow-y: auto;
        padding: 20px 16px;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) var(--mb-note-bg);
    }

    .site-main .mb-article-layout--no-toc .mb-article-body,
    .site-main .mb-page-layout > .mb-prose {
        grid-column: 2;
    }

    .site-main .mb-related {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 32px;
    }

    .site-main .mb-related .mb-section-top {
        grid-column: span 3;
        align-content: start;
    }

    .site-main .mb-related .mb-reading-list {
        grid-column: span 9;
    }

    .site-main .mb-contact-layout,
    .site-main .mb-notfound {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 32px;
    }

    .site-main .mb-contact-layout > .mb-prose,
    .site-main .mb-contact-copy,
    .site-main .mb-notfound-copy {
        grid-column: span 7;
    }

    .site-main .mb-contact-photo,
    .site-main .mb-notfound-photo {
        grid-column: span 5;
    }

    .site-main .mb-search-result {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
        padding-block: 40px;
    }

    .site-main .mb-search-result > .mb-row-details {
        grid-column: span 2;
    }

    .site-main .mb-search-result .mb-row-link {
        grid-column: span 10;
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: 24px;
    }

    .site-main .mb-search-result .mb-row-copy {
        grid-column: span 7;
    }

    .site-main .mb-search-result .mb-post-photo {
        grid-column: span 3;
        width: 100%;
        max-width: none;
    }

    .site-main .mb-search-result.mb-row--text-only .mb-row-copy {
        grid-column: 1 / -1;
        max-width: 680px;
    }
}

@media (min-width: 1200px) {
    .site-main {
        --mb-section-space: clamp(88px, 7.2vw, 104px);
    }

    .site-main .mb-home.mb-home .mb-home-opening {
        padding-top: 80px;
    }

    .site-main .mb-home.mb-home .mb-latest-side {
        padding-left: 16px;
    }

    .site-main .mb-home.mb-home .mb-story-row .mb-row-link {
        padding-block: 32px;
    }

    .site-main .mb-home.mb-home .mb-fit-copy {
        padding-left: 48px;
    }

    .site-main .mb-archive-opening {
        padding-top: 24px;
    }

    .site-main .mb-article-header h1 {
        max-width: 25ch;
    }

    .site-main .mb-reading-row .mb-row-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 32px;
        align-items: start;
    }

    .site-main .mb-reading-row .mb-row-copy > .mb-meta:first-child {
        grid-column: 1 / -1;
    }

    .site-main .mb-reading-row .mb-row-title {
        grid-column: 1;
        margin-block: 0;
    }

    .site-main .mb-reading-row .mb-row-copy > .mb-meta:last-child {
        grid-column: 2;
        align-self: end;
        max-width: 14ch;
        padding-bottom: 3px;
        text-align: end;
    }

    .site-main .mb-contact-photo,
    .site-main .mb-notfound-photo {
        margin-top: 8px;
    }
}

/* 16 — Petits écrans : ordre du document intégralement conservé
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
    .site-main .mb-article-aside {
        width: 100%;
        max-width: 680px;
    }

    .site-main .mb-toc {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .site-main .mb-article-layout,
    .site-main .mb-page-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-main .mb-article-body,
    .site-main .mb-page-layout > .mb-prose {
        grid-column: auto;
    }
}

@media (max-width: 899px) {
    .site-main {
        --mb-sticky-offset: 96px;
    }

    .site-main .mb-archive-opening {
        align-items: start;
    }

    .site-main .mb-archive-title {
        font-size: clamp(52px, 8vw, 72px);
    }

    .site-main .mb-article-header > .mb-meta .mb-meta-separator {
        padding-inline: 2px;
    }

    .site-main .mb-home.mb-home .mb-fit-copy > .mb-section-heading {
        font-size: clamp(36px, 4.5vw, 44px);
    }
}

@media (max-width: 699px) {
    .site-main {
        --mb-gap: 32px;
        --mb-section-space: clamp(48px, 9vw, 64px);
    }

    .site-main .mb-home.mb-home .mb-home-opening {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .site-main .mb-home.mb-home .mb-home-title {
        margin-block: 24px;
    }

    .site-main .mb-home.mb-home .mb-hero-figure {
        grid-column: auto;
    }

    .site-main .mb-section-top,
    .site-main .mb-home.mb-home .mb-section-top {
        margin-bottom: 32px;
        padding-top: 20px;
    }

    .site-main .mb-home.mb-home .mb-fit-copy,
    .site-main .mb-home.mb-home .mb-fit-photo {
        grid-column: auto;
        grid-row: auto;
    }

    .site-main .mb-home.mb-home .mb-fit-photo {
        max-width: none;
    }

    .site-main .mb-home.mb-home .mb-fit-photo img {
        aspect-ratio: 3 / 2;
    }

    .site-main .mb-home.mb-home .mb-editorial-copy {
        margin-top: 0;
    }

    .site-main .mb-breadcrumb {
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .site-main .mb-archive-opening {
        padding-top: 8px;
        padding-bottom: 40px;
    }

    .site-main .mb-category-photo img {
        aspect-ratio: 3 / 2;
    }

    .site-main .mb-archive-lead {
        padding-bottom: 32px;
    }

    .site-main .mb-archive-row {
        padding-block: 28px;
    }

    .site-main .mb-archive-row .mb-row-details {
        padding-top: 0;
    }

    .site-main .mb-category-links {
        gap: 4px 24px;
    }

    .site-main .mb-category-switcher {
        margin-bottom: 32px;
    }

    .site-main .mb-article-header {
        padding-top: 8px;
    }

    .site-main .mb-article-header h1 {
        margin-top: 16px;
    }

    .site-main .mb-article-header > .mb-meta {
        margin-top: 24px;
        line-height: 1.8;
    }

    .site-main .mb-article-layout,
    .site-main .mb-page-layout {
        gap: 32px;
    }

    .site-main .mb-prose {
        line-height: 1.65;
    }

    .site-main .mb-prose h2 {
        margin-top: 40px;
        padding-top: 20px;
    }

    .site-main .mb-prose h3 {
        margin-top: 28px;
    }

    .site-main .mb-answer,
    .site-main .mb-caution {
        padding: 24px 20px;
    }

    .site-main .mb-prose blockquote {
        padding-inline-start: 20px;
    }

    .site-main .mb-contact-photo img {
        aspect-ratio: 3 / 2;
    }

    .site-main .mb-notfound-photo {
        width: 100%;
        max-width: 480px;
    }

    .site-main .mb-search-result {
        gap: 16px;
        padding-block: 28px;
    }

    .site-main .mb-search-result .mb-row-details .mb-kicker {
        margin-bottom: 8px;
    }

    .site-main .mb-pagination {
        margin-top: 32px;
    }

    .site-main .mb-reading-row .mb-row-link {
        padding-block: 24px;
    }
}

@media (max-width: 600px) {
    .site-main .mb-search-form {
        padding: 20px;
    }

    .site-main .mb-search-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-main .mb-search-submit {
        width: 100%;
        min-height: 52px;
    }

    .site-main .mb-actions {
        align-items: stretch;
        gap: 12px 24px;
    }

    .site-main .mb-actions > .mb-button {
        width: 100%;
    }

    .site-main .mb-home.mb-home .mb-actions > .mb-button {
        width: 100%;
    }

    .site-main .mb-home.mb-home .mb-topic-row {
        min-height: 112px;
        padding-block: 24px;
    }

    .site-main .mb-home.mb-home .mb-story-row .mb-row-link,
    .site-main .mb-reading-row .mb-row-link {
        grid-template-columns: 24px minmax(0, 1fr) 20px;
        gap: 12px;
    }

    .site-main .mb-article-header > .mb-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .site-main .mb-article-header > .mb-meta .mb-meta-separator {
        display: none;
    }

    .site-main .mb-toc {
        padding: 20px;
    }

    .site-main .mb-category-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-main .mb-category-links .mb-text-link {
        width: 100%;
        min-height: 44px;
    }

    .site-main .mb-pagination ul {
        gap: 8px;
    }

    .site-main .mb-pagination .prev,
    .site-main .mb-pagination .next {
        padding-inline: 12px;
    }

    .site-main .mb-correction-note p {
        display: block;
    }

    .site-main .mb-correction-note .mb-text-link {
        display: flex;
        width: fit-content;
        margin-top: 8px;
    }

    .site-main .mb-notfound .mb-search-form {
        padding: 20px;
    }

    .site-main .mb-prose :where(th, td),
    .site-main .mb-table-scroll :where(th, td) {
        padding: 12px;
    }
}

/* 17 — Accessibilité : focus, lecture assistée et préférences
   -------------------------------------------------------------------------- */

.site-main :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible,
.site-main .mb-home.mb-home :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]
):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--surface);
}

.site-main .mb-feature-link:focus-visible .mb-feature-title,
.site-main .mb-row-link:focus-visible .mb-row-title,
.site-main .mb-topic-row:focus-visible .mb-topic-name {
    text-decoration-thickness: 2px;
}

.site-main .mb-fit-note ::selection {
    background: var(--surface);
    color: var(--primary);
}

.site-main .mb-sr-only,
.site-main .mb-pagination .mb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.site-main .mb-sr-only:focus,
.site-main .mb-sr-only:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: var(--surface);
    color: var(--primary);
    white-space: normal;
}

@media (prefers-reduced-motion: reduce) {
    .site-main *,
    .site-main *::before,
    .site-main *::after {
        animation: none;
        transition: none;
        scroll-behavior: auto;
    }
}

@media (prefers-contrast: more) {
    .site-main {
        --mb-rule: var(--primary);
        --mb-rule-light: var(--primary);
    }

    .site-main .mb-meta,
    .site-main .mb-photo-caption {
        font-weight: 700;
    }

    .site-main a {
        text-decoration-thickness: 2px;
    }

    .site-main .mb-home.mb-home .mb-topic-row,
    .site-main .mb-home.mb-home .mb-story-row {
        border-color: var(--primary);
    }
}

@media (forced-colors: active) {
    .site-main .mb-button,
    .site-main .mb-search-input,
    .site-main .mb-answer,
    .site-main .mb-caution,
    .site-main .mb-empty,
    .site-main .mb-toc,
    .site-main .mb-pagination .page-numbers:not(ul) {
        border: 1px solid;
        forced-color-adjust: auto;
    }

    .site-main :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid;
        box-shadow: none;
    }
}

/* 18 — Impression : contenu complet, sans navigation latérale
   -------------------------------------------------------------------------- */

@media print {
    .site-main {
        --container: 100%;
        --mb-wide: 100%;
        --mb-gutter: 0px;
        --mb-section-space: 32px;

        background: var(--surface);
        color: var(--text);
        font-size: 12pt;
        line-height: 1.5;
    }

    .site-main .mb-breadcrumb,
    .site-main .mb-article-aside,
    .site-main .mb-category-switcher,
    .site-main .mb-pagination,
    .site-main .mb-search-form,
    .site-main .mb-related,
    .site-main .mb-actions {
        display: none;
    }

    .site-main .mb-wide,
    .site-main .mb-reading-width,
    .site-main .mb-article-layout,
    .site-main .mb-page-layout,
    .site-main .mb-article-figure {
        width: 100%;
        max-width: none;
        margin-inline: 0;
        padding-inline: 0;
    }

    .site-main .mb-article-layout,
    .site-main .mb-page-layout {
        display: block;
    }

    .site-main .mb-article-body > .mb-prose,
    .site-main .mb-page-layout > .mb-prose {
        max-width: none;
    }

    .site-main .mb-prose {
        font-size: 12pt;
        line-height: 1.5;
    }

    .site-main .mb-article-header h1,
    .site-main .mb-page-header h1 {
        max-width: none;
        font-size: 30pt;
    }

    .site-main .mb-prose h2 {
        margin-top: 24pt;
        font-size: 21pt;
    }

    .site-main .mb-prose h3 {
        font-size: 17pt;
    }

    .site-main :where(h1, h2, h3, h4) {
        break-after: avoid;
    }

    .site-main :where(figure, blockquote, .mb-answer, .mb-caution, tr) {
        break-inside: avoid;
    }

    .site-main .mb-prose :where(p, li) {
        orphans: 3;
        widows: 3;
    }

    .site-main .mb-article-figure img {
        max-height: 90mm;
        object-fit: contain;
    }

    .site-main .mb-table-scroll,
    .site-main .mb-prose .wp-block-table {
        overflow: visible;
    }

    .site-main .mb-table-scroll table,
    .site-main .mb-prose .wp-block-table table {
        min-width: 0;
        table-layout: fixed;
        font-size: 10pt;
    }

    .site-main .mb-home.mb-home .mb-fit-note {
        border-block: 1px solid var(--primary);
        background: var(--surface);
        color: var(--text);
    }

    .site-main .mb-home.mb-home .mb-fit-note :where(
        p,
        h2,
        h3,
        a,
        .mb-kicker,
        .mb-photo-caption,
        .mb-step-number
    ) {
        color: var(--text);
    }
}