/* Jimenez Julien · Encyclopédie du référencement (jimenez-julien.org). Feuille unique, mode clair.
   Libre Baskerville (titres, termes), Lato (lecture), Source Code Pro (termes techniques).
   Gabarit : .hdr, .drawer, main.page (zones toc, lead, body), .ftr ; magazine .page--mag ; article .page--article > .prose. */

:root {
  --bg: #FFFFFF;
  --surface: #F8F9FA;
  --ink: #202122;
  --muted: #54595D;
  --line: #DADDE1;
  --primary: #3366CC;
  --secondary: #72777D;
  --accent: #14866D;
  --primary-ink: #2A4B8D;
  --primary-soft: #EAF0FB;
  --accent-ink: #0B6B56;
  --accent-soft: #E9F5F1;
  --line-strong: #8E949A;
  --band: #EEF0F3;
  --mark: #DCE6F8;
  --f-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --f-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;
  --fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3.4rem);
  --fs-h2: clamp(1.45rem, 1.2rem + .95vw, 1.95rem);
  --fs-h3: clamp(1.1rem, 1.03rem + .35vw, 1.28rem);
  --sp-section: clamp(3rem, 6vw, 5rem);
  --hdr-h: 64px;
  --toc-w: 240px;
  --col-gap: 56px;
  --measure: 760px;
  --max: 1400px;
  --gutter: clamp(16px, 3vw, 32px);
  --r: 2px;
  --pop: 0 4px 16px rgba(32, 33, 34, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M1 6h14M11 1.5 15.5 6 11 10.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5 8.2 14l7.3-7.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M11.5 4H16v4.5M16 4 9.5 10.5M14 11.5V15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 clamp(1rem, .96rem + .18vw, 1.0625rem)/1.65 var(--f-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
html.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(51, 102, 204, .35); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color .15s, text-decoration-color .15s; }
a:hover { color: var(--primary-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 1px; }
::selection { background: var(--mark); color: var(--ink); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
b, strong { font-weight: 700; }
sup { line-height: 0; }
code { font: 400 .86em/1.4 var(--f-mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .05em .3em; overflow-wrap: anywhere; }
kbd { display: inline-block; min-width: 1.5em; padding: .1em .4em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; background: #fff; font: 500 .78em/1.3 var(--f-mono); color: var(--muted); text-align: center; }
mark { background: var(--mark); color: inherit; box-shadow: 0 1px 0 var(--primary); border-radius: 1px; padding: 0 1px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.ic--xs { width: 14px; height: 14px; margin-left: 3px; vertical-align: -.1em; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; border-radius: var(--r); }
.skip:focus { top: 10px; color: #fff; }
[id] { scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* Boutons et liens d'action */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r); font: 700 .95rem/1.1 var(--f-body); text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.btn .ic { width: 18px; height: 18px; }
.btn--solid { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--solid:hover { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; }
.btn--line { background: #fff; border-color: var(--primary); color: var(--primary); }
.btn--line:hover { background: var(--primary-soft); color: var(--primary-ink); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.more { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; text-decoration: none; }
.more .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.more:hover { text-decoration: underline; }
.more:hover .ic { transform: translateX(3px); }

/* En-tête */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
.hdr__in { position: relative; max-width: var(--max); height: var(--hdr-h); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr) auto; column-gap: var(--col-gap); align-items: center; }
.hdr__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink); cursor: pointer; }
.hdr__btn:hover { background: var(--surface); border-color: var(--line); }
.hdr__btn .ic { width: 22px; height: 22px; }
.hdr__menu, .hdr__loupe { display: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 32px; height: 32px; flex: none; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
.brand__txt { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font: 400 1.18rem/1.1 var(--f-display); letter-spacing: -.005em; white-space: nowrap; }
.brand__sub { margin-top: 3px; font: 700 .8rem/1 var(--f-body); font-variant: all-small-caps; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.hdr__search { position: relative; max-width: 480px; width: 100%; }
.hdr__nav { display: flex; align-items: center; gap: 4px; }
.hdr__nav a { padding: 10px 12px; font: 700 .9rem/1 var(--f-body); color: var(--ink); text-decoration: none; border-radius: var(--r); }
.hdr__nav a:hover { color: var(--primary); background: var(--surface); }

/* Champs de recherche et suggestions */
.field { position: relative; display: flex; align-items: center; }
.field__ic { position: absolute; left: 11px; top: 50%; margin-top: -10px; color: var(--secondary); pointer-events: none; }
.field__input { width: 100%; height: 40px; padding: 0 40px 0 38px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; color: var(--ink); font: 400 .95rem/1 var(--f-body); -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.field__input::placeholder { color: var(--secondary); opacity: 1; }
.field__input:hover { border-color: var(--muted); }
.field__input:focus { outline: none; border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.field__input::-webkit-search-cancel-button { cursor: pointer; }
.field__kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.field__input:not(:placeholder-shown) ~ .field__kbd, .field__input:focus ~ .field__kbd { opacity: 0; }
.field--lg .field__input { height: 52px; padding-left: 46px; font-size: 1.05rem; }
.field--lg .field__ic { left: 15px; width: 22px; height: 22px; margin-top: -11px; }
.sugg { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); max-height: min(60vh, 380px); overflow-y: auto; }
.sugg__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 14px; font-size: .95rem; line-height: 1.3; cursor: pointer; }
.sugg__opt[aria-selected="true"], .sugg__opt:hover { background: var(--surface); }
.sugg__opt[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--primary); }
.sugg__t { font: 700 .98rem/1.3 var(--f-display); color: var(--ink); }
.sugg__c { font: 700 .66rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sugg__all { margin-top: 4px; border-top: 1px solid var(--line); color: var(--primary); font-weight: 700; font-size: .9rem; }
.sugg__none { color: var(--muted); font-style: italic; cursor: default; }

/* Tiroir mobile */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(32, 33, 34, .34); opacity: 0; transition: opacity .25s var(--ease); }
.drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); padding: 0 20px 32px; overflow-y: auto; background: #fff; border-right: 1px solid var(--line); transform: translateX(-100%); transition: transform .3s var(--ease); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); margin: 0 -8px 8px 0; border-bottom: 1px solid var(--line); }
.drawer__brand { font: 400 1.15rem/1 var(--f-display); }
.drawer__nav { display: grid; margin-bottom: 18px; }
.drawer__nav a { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); text-decoration: none; }
.drawer__label { margin: 0 0 6px; font: 700 .72rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drawer__toc { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.drawer__toc a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-left: 14px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.drawer__toc a:hover { color: var(--primary); }

/* Gabarit : sommaire latéral, introduction, corps */
.page { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr); grid-template-areas: "toc lead" "toc body"; column-gap: var(--col-gap); }
.lead { grid-area: lead; min-width: 0; padding-top: 18px; container-type: inline-size; }
.toc { grid-area: toc; min-width: 0; font-size: .875rem; }
.body { grid-area: body; min-width: 0; container-type: inline-size; }

/* Sommaire */
.toc__in { position: sticky; top: var(--hdr-h); max-height: calc(100vh - var(--hdr-h)); overflow-y: auto; padding: 30px 6px 24px 0; scrollbar-width: thin; }
.toc__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.toc__title { margin: 0; font: 700 1rem/1.3 var(--f-display); }
.toc__toggle { padding: 0; border: 0; background: none; font: 400 .85rem/1 var(--f-body); color: var(--primary); cursor: pointer; }
.toc__toggle::before { content: "["; color: var(--muted); }
.toc__toggle::after { content: "]"; color: var(--muted); }
.toc__toggle:hover { text-decoration: underline; }
.toc__body { position: relative; }
.toc__list, .toc__list ol { list-style: none; margin: 0; padding: 0; }
.toc__list { border-left: 1px solid var(--line); }
.toc__list a { display: flex; gap: 6px; padding: 5px 0 5px 14px; line-height: 1.35; color: var(--ink); text-decoration: none; transition: color .2s; }
.toc__list ol a { padding-left: 26px; font-size: .84rem; color: var(--muted); }
.toc__list a:hover { color: var(--primary); }
.toc__list a.is-active { color: var(--primary); font-weight: 700; }
.toc__n { flex: none; min-width: 1.7em; font: 500 .76rem/1.75 var(--f-mono); color: var(--secondary); }
.toc__list ol .toc__n { min-width: 2.2em; }
.toc__bar { position: absolute; top: 0; left: -.5px; width: 2px; height: var(--h, 0); background: var(--primary); transform: translateY(var(--y, 0)); transition: transform .35s var(--ease), height .35s var(--ease), opacity .2s; opacity: 0; pointer-events: none; }
.toc__bar.is-on { opacity: 1; }
.toc__meta { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.toc__meta .ic { width: 16px; height: 16px; }

/* Onglets, titre, introduction */
.tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.tabs__nav { display: flex; min-width: 0; }
.tabs__nav a { position: relative; padding: 11px 12px 10px; font: 700 .875rem/1 var(--f-body); color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs__nav a:first-child { padding-left: 2px; }
.tabs__nav a:hover { color: var(--primary); }
.tabs__nav a[aria-current] { color: var(--ink); }
.tabs__nav a[aria-current]::after { content: ""; position: absolute; left: 2px; right: 12px; bottom: -1px; height: 2px; background: var(--primary); }
.tabs__tool { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; font: 400 .82rem/1 var(--f-body); color: var(--muted); cursor: pointer; }
.tabs__tool:hover { color: var(--primary); background: var(--surface); }
.tabs__tool .ic { width: 17px; height: 17px; }
h1 { margin: 30px 0 0; padding-bottom: .3em; border-bottom: 1px solid var(--line); font: 400 var(--fs-h1)/1.14 var(--f-display); letter-spacing: -.012em; }
.lead__from { margin: .75em 0 0; color: var(--muted); font-size: .95rem; }
.lead__grid { display: grid; gap: 32px; margin-top: 26px; }
.lead__intro { margin: 0; font-size: 1.125rem; line-height: 1.72; }
.lead__intro b { font-weight: 700; }
.lead__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.finder { margin-top: 26px; }
.finder__label { display: block; margin-bottom: 8px; font: 700 .74rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.finder__hint { margin: 8px 0 0; font-size: .84rem; color: var(--muted); }
.az { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.az > * { display: flex; align-items: center; justify-content: center; height: 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 700 .95rem/1 var(--f-display); color: var(--primary); text-decoration: none; transition: opacity .25s, background-color .2s, color .2s; }
.az a:hover { background: var(--primary-soft); color: var(--primary-ink); }
.az span { color: #B0B5BA; font-weight: 400; }
.az a.is-dim { opacity: .28; }
.lead__side { min-width: 0; }
.glance { margin-top: 22px; border-top: 2px solid var(--ink); }
.glance__t { margin: 10px 0 2px; font: 700 .72rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.glance__list { margin: 0; }
.glance__list div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.glance__list dt { color: var(--muted); }
.glance__list dd { margin: 0; font-weight: 700; text-align: right; }

/* Figures */
.fig { margin: 0; padding: 5px; border: 1px solid var(--line); background: var(--surface); }
.fig__frame { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.fig__frame img { display: block; width: 100%; }
.fig figcaption { padding: 8px 4px 3px; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.fig__n { margin-right: 6px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); }

/* Sections */
.sec { padding-top: var(--sp-section); }
.sec__title { position: relative; margin: 0 0 .85em; padding-bottom: .35em; border-bottom: 1px solid var(--line); font: 400 var(--fs-h2)/1.25 var(--f-display); }
.sec__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.45em; margin-right: .6em; padding: 0 .35em; border: 1px solid var(--line); border-radius: var(--r); font: 500 .5em/1 var(--f-mono); color: var(--primary); vertical-align: .38em; }
.sub__title { position: relative; margin: 2.1em 0 .6em; font: 700 var(--fs-h3)/1.3 var(--f-display); }
.sub__n { margin-right: .6em; font: 500 .74em/1 var(--f-mono); color: var(--primary); }
.measure { max-width: var(--measure); }
.pilcrow { margin-left: .35em; padding: 0 .15em; border: 0; background: none; font: 400 .72em/1 var(--f-display); color: var(--secondary); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; vertical-align: .08em; }
h2:hover > .pilcrow, h3:hover > .pilcrow, .pilcrow:focus-visible { opacity: 1; }
.pilcrow:hover { color: var(--primary); }
@media (hover: none) { .pilcrow { opacity: .45; } }
.hatnote { display: flex; gap: 8px; align-items: baseline; margin: -.25em 0 1.1em; padding-left: 1.2em; font-size: .95rem; color: var(--muted); }
.hatnote .ic { width: 16px; height: 16px; color: var(--secondary); align-self: center; }
.term { color: inherit; text-decoration: underline dotted var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: .24em; cursor: help; }
.term:hover, .term:focus-visible { color: var(--primary); text-decoration-color: var(--primary); }
.ref { margin-left: 1px; font-size: .7em; vertical-align: super; }
.ref a { padding: 0 1px; font-family: var(--f-body); font-weight: 400; text-decoration: none; white-space: nowrap; }
.ref a:hover { text-decoration: underline; }

/* Infobulle et aperçu de note */
.pop { position: absolute; top: 0; left: 0; z-index: 70; width: max-content; max-width: min(340px, calc(100vw - 24px)); padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); font-size: .875rem; line-height: 1.5; color: var(--ink); animation: pop .18s var(--ease); }
.pop::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 6px); width: 11px; height: 11px; background: #fff; border: 1px solid var(--line); transform: rotate(45deg); }
.pop[data-place="top"]::before { bottom: -6px; border-top: 0; border-left: 0; }
.pop[data-place="bottom"]::before { top: -6px; border-bottom: 0; border-right: 0; }
.pop p { margin: 0; }
.pop__k { margin-bottom: 4px !important; font: 700 .64rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pop__t { margin-bottom: 4px !important; font: 700 1rem/1.3 var(--f-display); }
.pop__more { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .84rem; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 2. Biographie et infobox */
.bio { display: flow-root; }
.bio > p, .bio > ul, .bio > blockquote, .bio > h3 { max-width: var(--measure); }
.infobox { float: right; width: 300px; margin: 4px 0 28px 36px; border: 1px solid var(--line); background: var(--surface); font-size: .86rem; line-height: 1.45; }
.infobox__title { margin: 0; padding: 12px 14px 2px; text-align: center; font: 700 1.15rem/1.3 var(--f-display); }
.infobox__fig { margin: 10px 12px 0; }
.infobox__frame { padding: 8px; border: 1px solid var(--line); background: var(--surface); }
.infobox__frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.infobox__fig figcaption { padding: 8px 0 4px; text-align: center; font-size: .85rem; color: var(--muted); }
.infobox__table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.infobox__table th, .infobox__table td { padding: 6px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.infobox__table th[scope="row"] { width: 40%; padding-right: 4px; font-weight: 700; color: var(--muted); }
.infobox__table td { overflow-wrap: anywhere; }
.infobox__group th { padding: 7px 12px; background: var(--band); text-align: center; font: 700 .68rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.domains { columns: 2 220px; column-gap: 28px; margin: 0 0 1.1em; padding: 14px 18px; list-style: none; border: 1px solid var(--line); font-size: .92rem; }
.domains li { position: relative; padding: 3px 0 3px 16px; break-inside: avoid; }
.domains li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; background: var(--primary); }
.sig { margin: 1.3em 0 1.3em; padding: 2px 0 2px 22px; border-left: 3px solid var(--primary); }
.sig p { margin: 0; font: italic 400 clamp(1.15rem, 1.05rem + .45vw, 1.4rem)/1.55 var(--f-display); }
.sig footer { margin-top: 8px; font: 700 .8rem/1 var(--f-body); font-variant: all-small-caps; letter-spacing: .1em; color: var(--muted); }

/* 3. Familles de notions */
.fam { display: grid; gap: 1px; margin: 26px 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.fam__item { display: flex; flex-direction: column; padding: 24px 24px 20px; background: #fff; transition: background-color .25s; }
.fam__item:hover { background: #FCFCFD; }
.fam__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fam__n { font: 500 .8rem/1 var(--f-mono); color: var(--primary); }
.fam__ic { width: 38px; height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); color: var(--primary); background: var(--surface); }
.fam__title { margin: 0 0 10px; font: 700 1.16rem/1.3 var(--f-display); }
.fam__item > p { margin: 0 0 16px; font-size: .95rem; line-height: 1.62; }
.fam__terms { display: flex; flex-wrap: wrap; gap: 4px 0; margin: auto 0 0; padding: 12px 0 0; list-style: none; border-top: 1px dashed var(--line); font-size: .86rem; }
.fam__terms li:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--secondary); }
.fam__done { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font: 700 .78rem/1.2 var(--f-body); color: var(--accent-ink); }
.fam__done .ic { width: 16px; height: 16px; stroke-width: 1.8; }

/* 4. Glossaire */
.gl-bar { position: sticky; top: var(--hdr-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 0; padding: 12px 0; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gl-bar__field { flex: 1 1 240px; max-width: 420px; }
.gl-bar__count { margin: 0; font-size: .9rem; color: var(--muted); }
.gl-bar__count strong { margin-right: 2px; font: 700 1.15rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.gl-bar__reset { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; font: 700 .86rem/1 var(--f-body); color: var(--primary); cursor: pointer; }
.gl-bar__reset .ic { width: 16px; height: 16px; }
.gl-bar__reset:hover { background: var(--primary-soft); }
.gl-empty { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.gl-empty .ic { color: var(--primary); margin-top: 2px; }
.gl-empty p { margin: 0; }
.gl-group { display: grid; grid-template-columns: 72px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.gl-letter { position: sticky; top: calc(var(--hdr-h) + 70px); align-self: start; margin: 0; padding-top: 12px; font: 400 3.4rem/1 var(--f-display); color: var(--line-strong); }
.gl-list { position: relative; display: grid; column-gap: 44px; margin: 0; padding: 8px 0 12px; }
.gl-entry { margin: 0 -10px; padding: 14px 10px 12px; border-radius: var(--r); scroll-margin-top: calc(var(--hdr-h) + 84px); }
.gl-entry dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gl-entry dfn { font: 700 1.06rem/1.35 var(--f-display); font-style: normal; color: var(--ink); }
.gl-entry dfn.mono { padding: 0 .3em; font: 500 .98rem/1.45 var(--f-mono); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.gl-entry dd { margin: 6px 0 0; }
.gl-entry dd > p { margin: 0 0 7px; font-size: .94rem; line-height: 1.6; }
.gl-entry .gl-see { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; font-size: .84rem; color: var(--muted); }
.gl-see .ic, .gl-hat .ic { width: 15px; height: 15px; margin-right: 2px; align-self: center; color: var(--secondary); }
.gl-entry .gl-hat { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; font-size: .86rem; color: var(--muted); }
.gl-entry:target, .gl-entry.is-flash { animation: flash 2.6s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--mark); box-shadow: inset 3px 0 0 var(--primary); } 100% { background: transparent; box-shadow: inset 3px 0 0 transparent; } }
.pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font: 700 .64rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* 5. Schéma du parcours d'une page */
.flow-wrap { display: grid; gap: 32px; margin-top: 26px; }
.flow { margin: 0; }
.flow__nodes { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 34px; margin: 0; padding: 0; list-style: none; }
.flow__item { position: relative; }
.flow__node { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; width: 100%; height: 100%; padding: 12px 14px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .4s var(--ease), background-color .25s, box-shadow .25s; transition-delay: 0s; }
.flow__n { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; border: 1px solid var(--line); border-radius: var(--r); font: 500 .74rem/1 var(--f-mono); color: var(--secondary); transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.flow__t { font: 700 1rem/1.25 var(--f-display); }
.flow__s { font-size: .78rem; line-height: 1.4; color: var(--muted); }
.flow__node:hover { border-color: var(--primary); }
.flow__node[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.flow.is-lit .flow__node, .flow.is-lit .flow__n { transition-delay: calc(var(--i) * 170ms); }
.flow.is-lit .flow__node { border-color: #9DB3E3; }
.flow.is-lit .flow__n { background: var(--primary); border-color: var(--primary); color: #fff; }
.flow__item::after { content: ""; position: absolute; left: calc(50% - 9px); top: calc(100% + 11px); width: 18px; height: 12px; background: var(--line-strong); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transform: rotate(90deg); transition: background-color .4s var(--ease); }
.flow.is-lit .flow__item::after { background: var(--primary); transition-delay: calc(var(--i) * 170ms + 120ms); }
.flow__item:last-child::after { opacity: .55; transform: rotate(90deg); }
.flow__item:last-child::before { content: "puis retour à l'étape 1"; position: absolute; left: calc(50% + 16px); top: calc(100% + 9px); font: 400 .72rem/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.flow__panel { position: relative; margin-top: 26px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.js .flow__panel { box-shadow: var(--pop); animation: pop .2s var(--ease); }
.flow__defs { margin: 0; padding: 0; list-style: none; }
.flow__def + .flow__def { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.js .flow__def { display: none; margin: 0; padding: 0; border: 0; }
.js .flow__def.is-active { display: block; animation: pop .25s var(--ease); }
.flow__def p { margin: 0 0 8px; font-size: .95rem; }
.flow__def .flow__def-k { margin-bottom: 8px; font: 500 .74rem/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.flow__def .more { font-size: .9rem; }
.flow__legend { margin-top: 12px; font-size: .85rem; font-style: italic; color: var(--muted); }
.flow-aside { display: grid; gap: 20px; align-content: start; }
.note-box { padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); font-size: .88rem; }
.note-box__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .74rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--primary-ink); }
.note-box ul { margin: 0; padding: 0 0 0 1.1em; }
.note-box li { margin-bottom: 6px; }
.note-box li::marker { color: var(--primary); }

/* 6. Méthode */
.steps { display: grid; margin: 22px 0 0; padding: 0; list-style: none; }
.steps__item { position: relative; padding: 22px 26px 18px 0; border-top: 1px solid var(--line); }
.steps__item::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.steps__n { display: block; margin-bottom: 10px; font: 400 2.5rem/1 var(--f-display); color: var(--primary); font-variant-numeric: lining-nums; }
.steps__t { margin: 0 0 8px; font: 900 1rem/1.3 var(--f-body); }
.steps__item p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.pledges { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 26px 0 0; padding: 14px 18px; list-style: none; background: var(--accent-soft); border: 1px solid #C9E4DB; border-radius: var(--r); font: 700 .88rem/1.35 var(--f-body); color: var(--accent-ink); }
.pledges li { display: flex; align-items: center; gap: 8px; }
.pledges .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.rule { display: grid; gap: 30px; }
.rule__list { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: rule; }
.rule__list li { position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid var(--line); font-size: .95rem; counter-increment: rule; }
.rule__list li:first-child { border-top: 1px solid var(--line); }
.rule__list li::before { content: counter(rule); position: absolute; left: 0; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--primary); border-radius: 50%; font: 500 .74rem/1 var(--f-mono); color: var(--primary); }
.card-spec { margin: 0; }
.card-spec__sheet { position: relative; padding: 28px 22px 42px; border: 1px solid var(--line); border-top: 3px solid var(--primary); background: #fff repeating-linear-gradient(to bottom, transparent 0 27px, #E9EEF6 27px 28px); background-origin: padding-box; }
.card-spec__sheet::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: 12px; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.card-spec__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 28px; height: 28px; }
.card-spec__term { font: 500 1.15rem/28px var(--f-mono); color: var(--ink); }
.card-spec__row { display: flex; gap: 10px; margin: 0; font-size: .9rem; line-height: 28px; }
.card-spec__k { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 4px; border: 1px solid var(--primary); border-radius: 50%; font: 500 .68rem/1 var(--f-mono); color: var(--primary); background: #fff; }
.card-spec figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); }
.avis { max-width: var(--measure); margin: 36px 0 0; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.avis__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 .74rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.avis__t .ic { width: 18px; height: 18px; }
.avis p { margin: 0 0 10px; }
.avis .avis__sig { margin: 0; font: italic .9rem/1.4 var(--f-display); color: var(--muted); }

/* 7. Chronologie */
.seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.seg__label { margin-right: 4px; font-size: .86rem; color: var(--muted); }
.seg__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: #fff; font: 700 .86rem/1 var(--f-body); color: var(--muted); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.seg__btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); }
.seg__btn[aria-pressed="false"] .dot { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot--jj { background: var(--primary); }
.dot--g { background: var(--secondary); }
.table-wrap { border: 1px solid var(--line); }
.chrono { width: 100%; border-collapse: collapse; font-size: .93rem; }
.chrono th, .chrono td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.chrono thead th { position: sticky; top: var(--hdr-h); z-index: 2; background: var(--surface); font: 700 .72rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 -1px 0 var(--line); }
.chrono tbody tr:nth-child(even) { background: var(--surface); }
.js .chrono tbody tr:nth-child(even) { background: none; }
.js .chrono tbody tr.is-alt { background: var(--surface); }
.chrono tbody tr:last-child td { border-bottom: 0; }
.chrono__y { width: 150px; font: 700 .95rem/1.5 var(--f-display); font-variant-numeric: lining-nums; white-space: nowrap; }
.chrono td:last-child { width: 1%; white-space: nowrap; }
.chrono .is-now .chrono__y { color: var(--accent-ink); }
.chrono .is-now .chrono__y::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: .15em; }
.chrono__undated { border-top: 1px solid var(--line); }
.chrono__sep th { padding: 14px 14px 6px; background: #fff !important; font: italic .9rem/1.3 var(--f-display); color: var(--muted); border-bottom: 0; }
.tag { display: inline-block; padding: 4px 7px; border-radius: var(--r); font: 700 .66rem/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tag--jj { background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px #C9D6F2; }
.tag--g { background: var(--band); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* 8. Données clés */
.data { display: grid; gap: 32px; margin-top: 24px; }
.dt { width: 100%; align-self: start; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: .92rem; }
.dt caption { padding: 0 0 10px; caption-side: top; text-align: left; font: 700 1.08rem/1.3 var(--f-display); }
.dt caption .ic { margin-right: 8px; color: var(--primary); }
.dt thead th { padding: 9px 0; border-bottom: 1px solid var(--ink); text-align: left; font: 700 .7rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dt tbody th { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: middle; }
.dt td { padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tbody tr:last-child > * { border-bottom: 0; }
.dt .dt__num { text-align: right; white-space: nowrap; }
.dt__sub { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.dt__sub code { font-size: .92em; }
.dt__pre { font-size: .8rem; color: var(--muted); }
.dt__v { display: inline-block; font: 700 1.28rem/1.1 var(--f-display); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); text-align: right; }

/* 9. Réception */
.recep { display: grid; gap: 30px; margin-top: 26px; }
.quote { margin: 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--primary); }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font: 400 .98rem/1.72 var(--f-display); }
.quote--lead p { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.7; font-style: italic; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; font-size: .86rem; line-height: 1.4; }
.quote__name { font-weight: 900; }
.quote__role { color: var(--muted); }
.quote__src { margin-top: 2px; font-size: .8rem; font-style: italic; color: var(--secondary); }

/* 10. Cartes d'articles */
.cards { display: grid; gap: 22px; margin: 26px 0 0; padding: 0; list-style: none; }
.card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); transition: border-color .2s; }
.card:hover { border-color: var(--primary); }
.card__img { aspect-ratio: 3 / 2; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
.card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__img img { transform: scale(1.035); }
.card__body { display: flex; flex: 1; flex-direction: column; padding: 16px 18px 16px; }
.card__kick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 10px; font-size: .74rem; }
.card__type { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.card__type .ic { width: 16px; height: 16px; }
.card__cat { color: var(--muted); }
.card__title { margin: 0 0 10px; font: 700 1.08rem/1.38 var(--f-display); }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card__title a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(51, 102, 204, .4); }
.card__title a:focus-visible { outline: none; }
.card__title a:focus-visible::after { outline: 2px solid var(--primary); outline-offset: -2px; }
.card__sum { margin: 0 0 14px; font-size: .9rem; line-height: 1.6; color: var(--muted); }
.card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.card__meta .ic { width: 15px; height: 15px; }
.more-wrap { margin: 20px 0 0; }

/* 11. Questions fréquentes */
.faq { max-width: var(--measure); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; align-items: center; gap: 10px; min-height: 44px; padding: 15px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__n { font: 500 .76rem/1 var(--f-mono); color: var(--primary); }
.faq__q { font: 700 1.03rem/1.4 var(--f-display); transition: color .15s; }
.faq__ic { color: var(--secondary); transition: transform .25s var(--ease); }
.faq__item summary:hover .faq__q { color: var(--primary); }
.faq__item[open] .faq__ic { transform: rotate(90deg); }
.faq__item[open] summary .faq__q { color: var(--ink); }
.faq__a { padding: 0 30px 18px 48px; }
.faq__item[open] .faq__a { animation: pop .25s var(--ease); }
.faq__a p { margin: 0 0 .7em; }
.faq__a p:last-child { margin: 0; }

/* 12. Notes et références */
.notes { margin: 16px 0 0; padding: 0 0 0 1.7em; font-size: .9rem; line-height: 1.55; }
.notes li { margin: 0 0 10px; padding: 2px 4px; break-inside: avoid; border-radius: var(--r); }
.notes li::marker { font: 500 .85em var(--f-mono); color: var(--secondary); }
.notes li:target { background: var(--mark); }
.note__back { margin-right: 6px; font-weight: 700; }
.note__back a { text-decoration: none; }
.note__back a:hover { text-decoration: underline; }
.note__back sup { font-size: .7em; }

/* 13. Contribuer et contacter */
.contrib { display: grid; gap: 18px 22px; margin-top: 22px; padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); }
.contrib__ic { width: 28px; height: 28px; color: var(--primary); }
.contrib__q { margin: 0 0 8px; font: 700 1.15rem/1.4 var(--f-display); }
.contrib__body > p { max-width: 640px; }
.contrib__mail { display: inline-block; margin: 6px 0 20px; font: 700 clamp(1.2rem, 5.6cqi, 2.5rem)/1.2 var(--f-display); color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 2px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.contrib__mail:hover { color: var(--primary); }
.contrib__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contrib__delay { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .9rem; color: var(--muted); }
.contrib__delay .ic { color: var(--accent-ink); }
.contrib__tips { font-size: .88rem; }
.contrib__tips-t { margin: 0 0 8px; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contrib__tips ol { margin: 0; padding-left: 1.3em; }
.contrib__tips li { margin-bottom: 6px; }
.contrib__tips li::marker { font-family: var(--f-mono); color: var(--primary); }

/* Pied de page */
.ftr { margin-top: var(--sp-section); background: var(--surface); border-top: 1px solid var(--line); font-size: .9rem; }
.ftr__in { max-width: var(--max); margin: 0 auto; padding: 44px var(--gutter) 32px; display: grid; gap: 30px; }
.ftr__brand { display: flex; flex-direction: column; margin: 0 0 10px; font: 400 1.2rem/1.1 var(--f-display); }
.ftr__brand span { margin-top: 4px; font: 700 .8rem/1 var(--f-body); font-variant: all-small-caps; letter-spacing: .1em; color: var(--muted); }
.ftr__about p { color: var(--muted); }
.ftr__about .ftr__brand { color: var(--ink); }
.ftr__upd { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.ftr__upd .ic { width: 16px; height: 16px; color: var(--accent-ink); }
.ftr__h { margin: 0 0 10px; font: 700 .72rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ftr__col ul { margin: 0; padding: 0; list-style: none; }
.ftr__col li { padding: 4px 0; }
.ftr__col a { color: var(--ink); text-decoration: none; }
.ftr__col a:hover { color: var(--primary); text-decoration: underline; }
.network-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ftr .network-links li { padding: 0; }
.network-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 500 .84rem/1.3 var(--f-mono); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.network-links a::before { content: ""; flex: none; width: 13px; height: 13px; background: var(--secondary); -webkit-mask: var(--ext) center / contain no-repeat; mask: var(--ext) center / contain no-repeat; transition: background-color .15s; }
.network-links a:hover { color: var(--primary); }
.network-links a:hover::before { background: var(--primary); }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px; padding: 18px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 26px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.ftr__legal p { margin: 0; max-width: 820px; }
.ftr__legal a { color: var(--muted); }

/* Magazine : index de l'encyclopédie */
.crumbs { margin: 0 0 4px; font-size: .84rem; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--secondary); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--muted); }
.lead > .crumbs { margin-top: 6px; }
.lead > .crumbs + h1 { margin-top: 18px; }
.mag-intro { max-width: var(--measure); margin-top: 22px; }
.mag-intro p:first-child { font-size: 1.1rem; line-height: 1.72; }
.kicker, .art-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 22px 0 0; font-size: .76rem; }
.kicker__type { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.kicker__type .ic { width: 16px; height: 16px; }
.art-cat + h1 { margin-top: 14px; }

/* Article détaillé */
.progress { position: fixed; top: calc(var(--hdr-h) - 2px); left: 0; right: 0; z-index: 55; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--primary); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.art-lead { max-width: var(--measure); margin: 20px 0 0; font-size: 1.15rem; line-height: 1.7; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 20px 0 0; padding: 12px 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.art-meta li { display: inline-flex; align-items: center; gap: 7px; }
.art-meta img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.art-meta .ic { width: 17px; height: 17px; color: var(--secondary); }
.art-meta strong { color: var(--ink); }
.art-cover { margin-top: 26px; }
.prose { max-width: var(--measure); }
.prose > p, .prose li { line-height: 1.75; }
.prose h2 { position: relative; margin: 2.3em 0 .75em; padding-bottom: .3em; border-bottom: 1px solid var(--line); font: 400 var(--fs-h2)/1.25 var(--f-display); }
.prose h2:first-child { margin-top: 1.2em; }
.prose h3 { position: relative; margin: 1.9em 0 .55em; font: 700 var(--fs-h3)/1.3 var(--f-display); }
.prose h4 { margin: 1.5em 0 .4em; font: 900 1rem/1.3 var(--f-body); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: 0 0 .45em; }
.prose li::marker { color: var(--primary); }
.prose ol > li::marker { font: 500 .9em var(--f-mono); }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--primary); font: italic 1.08rem/1.65 var(--f-display); }
.prose blockquote p { margin: 0 0 .5em; }
.prose blockquote footer, .prose blockquote cite { display: block; margin-top: 8px; font: normal 700 .8rem/1.3 var(--f-body); font-variant: all-small-caps; letter-spacing: .08em; color: var(--muted); }
.prose figure { margin: 1.8em 0; }
.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.prose .table-wrap { margin: 1.6em 0; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.tbl caption { padding: 10px 12px; caption-side: top; text-align: left; font: 700 .95rem/1.3 var(--f-display); border-bottom: 1px solid var(--line); }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--surface); font: 700 .72rem/1.25 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tbl tbody tr:nth-child(even) { background: var(--surface); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tbody th { font-weight: 700; }
.checklist { margin: 0 0 1.3em; padding: 0; list-style: none; }
.checklist li { position: relative; padding: 8px 0 8px 32px; border-bottom: 1px dashed var(--line); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--accent-soft); }
.checklist li::after { content: ""; position: absolute; left: 3px; top: 14px; width: 14px; height: 14px; background: var(--accent-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.box { margin: 1.8em 0; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--secondary); }
.box > :last-child { margin-bottom: 0; }
.box__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .74rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.box__t .ic { width: 18px; height: 18px; }
.box--tip { border-left-color: var(--primary); }
.box--tip .box__t { color: var(--primary-ink); }
.box--remember { border-left-color: var(--accent); }
.box--remember .box__t { color: var(--accent-ink); }
.box--mistake { border-left-color: var(--ink); background: #fff; }
.box--mistake .box__t { color: var(--ink); }
.approach { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; margin: 2em 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.approach__photo { width: 76px; height: 76px; padding: 4px; border: 1px solid var(--line); background: #fff; }
.approach__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.approach__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .74rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.approach__body > :last-child { margin-bottom: 0; }
.author { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; max-width: var(--measure); margin: 3em 0 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); }
.author__photo { width: 104px; height: 104px; padding: 5px; border: 1px solid var(--line); background: #fff; }
.author__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.author__k { margin: 0 0 4px; font: 700 .7rem/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.author__name { margin: 0 0 8px; font: 700 1.15rem/1.3 var(--f-display); }
.author p { font-size: .94rem; }
.author__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-weight: 700; font-size: .9rem; }
.related { max-width: none; margin-top: var(--sp-section); }
.related .cards { margin-top: 18px; }
.hdr__nav a[aria-current] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); border-radius: 0; }
.drawer__nav a[aria-current] { color: var(--primary); }
.art-cover { max-width: var(--measure); }
.art-cat .pill { text-decoration: none; }
.art-cat a.pill:hover { border-color: var(--primary); color: var(--primary); }
.prose .hatnote { margin: 1.6em 0 0; padding-left: 0; }
.prose .sec__n { font-size: .48em; }
.approach__sig { margin: 10px 0 0; font: italic .88rem/1.4 var(--f-display); color: var(--muted); }
.prose .faq { margin-top: 1em; }
.prose .checklist { padding-left: 0; }

/* Article : arbre de décision */
.tree { margin: 1.8em 0; padding: 20px 22px 16px; border: 1px solid var(--line); border-top: 3px solid var(--primary); background: #fff; }
.prose .tree__steps { margin: 0; padding: 0; list-style: none; }
.prose .tree__steps > li { position: relative; margin: 0; padding: 0 0 20px 52px; line-height: 1.6; }
.tree__steps > li::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 4px; border-left: 1px dashed var(--line-strong); }
.prose .tree__steps > li:last-child { padding-bottom: 4px; }
.tree__steps > li:last-child::before { display: none; }
.tree__k { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--primary); border-radius: 50%; background: var(--primary-soft); font: 500 .78rem/1 var(--f-mono); color: var(--primary-ink); }
.tree__ask { margin: 6px 0 10px; font: 700 1.02rem/1.45 var(--f-display); }
.tree__ans { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; align-items: baseline; margin: 0 0 8px; font-size: .94rem; line-height: 1.55; }
.tree__yes, .tree__no { display: inline-flex; justify-content: center; padding: 3px 0; border-radius: var(--r); font: 700 .66rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.tree__yes { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px #C9E4DB; }
.tree__no { background: var(--band); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.tree figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.45; color: var(--muted); }

/* Article : étapes de méthode */
.prose .method { margin: 1.4em 0 1.8em; padding: 0; list-style: none; counter-reset: m; border-top: 1px solid var(--line); }
.prose .method > li { position: relative; margin: 0; padding: 16px 0 16px 58px; border-bottom: 1px solid var(--line); counter-increment: m; }
.method > li::before { content: counter(m); position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--primary); border-radius: 50%; background: #fff; font: 400 1.15rem/1 var(--f-display); color: var(--primary); }
.method__t { display: block; margin-bottom: 3px; font: 700 1.02rem/1.4 var(--f-display); color: var(--ink); }

/* Article : planche anatomique de la SERP */
.plate { display: grid; gap: 18px; padding: 14px; }
.plate__page { padding: 12px; border: 1px solid var(--line); background: #fff; }
.plate__bar { height: 22px; margin: 0 28% 8px 0; border: 1px solid var(--line-strong); border-radius: 11px; }
.plate__tabs { display: flex; gap: 8px; margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.plate__tabs i { width: 26px; height: 5px; border-radius: 1px; background: var(--line); }
.plate__tabs i:first-child { background: var(--primary); }
.plate__cols { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pb { position: relative; margin-bottom: 8px; padding: 9px 9px 9px 33px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.pb:last-child { margin-bottom: 0; }
.pb > b, .plate__legend b { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--primary); color: #fff; font: 500 .66rem/1 var(--f-mono); }
.pb > b { position: absolute; left: 7px; top: 8px; }
.ln { display: block; width: 92%; height: 5px; margin: 0 0 5px; border-radius: 1px; background: var(--line); }
.ln:last-child { margin-bottom: 0; }
.ln--t { width: 72%; height: 7px; background: #9DB3E3; }
.ln--s { width: 38%; height: 4px; background: #C3C8CD; }
.ln--m { width: 64%; }
.pb--ai { background: var(--primary-soft); border-color: #C9D6F2; }
.pb--ad { border-style: dashed; }
.pb--ad .ln--s { width: 22%; background: var(--ink); }
.pb--paa .ln { height: 4px; margin-bottom: 8px; box-shadow: 0 5px 0 -1px #fff, 0 6px 0 -1px var(--band); }
.pb--paa .ln:last-child { margin-bottom: 0; }
.pb__map { position: relative; display: block; height: 44px; margin-bottom: 7px; background: var(--band) repeating-linear-gradient(35deg, transparent 0 10px, #E3E6EA 10px 11px); }
.pb__map::before, .pb__map::after { content: ""; position: absolute; top: 12px; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); }
.pb__map::before { left: 30%; }
.pb__map::after { left: 62%; top: 22px; }
.pb__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pb__thumbs i { aspect-ratio: 16 / 10; border-radius: 1px; background: var(--band); box-shadow: inset 0 0 0 1px var(--line); }
.pb--kp { padding-top: 34px; padding-left: 9px; }
.pb--kp > b { left: 8px; }
.pb__img { display: block; aspect-ratio: 4 / 3; margin-bottom: 7px; background: var(--band); }
.prose .plate__legend { margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.prose .plate__legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; padding: 7px 0; line-height: 1.45; border-bottom: 1px solid var(--line); }
.plate__legend li:first-child { border-top: 1px solid var(--line); }
.plate__legend b { transform: translateY(3px); }
.plate figcaption { grid-column: 1 / -1; padding-top: 0; }

/* Index de l'encyclopédie : notions liées */
.rt-grid { display: grid; gap: 18px; margin-top: 22px; }
.rt { padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); }
.rt__t { margin: 0 0 4px; font: 700 1.02rem/1.35 var(--f-display); }
.rt__t a { color: var(--ink); text-decoration: none; }
.rt__t a:hover { color: var(--primary); text-decoration: underline; }
.rt .nf__terms { margin-top: 10px; }
.mag-steps { max-width: var(--measure); }

/* Page d'erreur : une seule colonne */
.page--solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "body"; }
.page--solo .lead { max-width: 1040px; }

/* Page 404 */
.nf { padding: clamp(28px, 6vw, 72px) 0 0; }
.nf__code { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 500 .8rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.nf__code span { padding: 4px 7px; border: 1px solid var(--line); border-radius: var(--r); }
.nf__grid { display: grid; gap: 28px; margin-top: 26px; }
.nf__links { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.nf__links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); font: 700 1rem/1.3 var(--f-display); color: var(--ink); text-decoration: none; }
.nf__links a:hover { color: var(--primary); }
.nf__links .ic { color: var(--secondary); }
.nf__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.nf__terms a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: .9rem; text-decoration: none; color: var(--ink); }
.nf__terms a:hover { border-color: var(--primary); color: var(--primary); }

/* Apparitions au défilement */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Grilles selon la largeur disponible */
@container (min-width: 600px) {
  .az { grid-template-columns: repeat(26, minmax(0, 1fr)); }
  .az > * { height: 36px; font-size: .9rem; }
  .flow__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; row-gap: 48px; }
  .flow__node { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; gap: 6px; min-height: 124px; padding: 14px 13px; }
  .flow__n { grid-row: auto; }
  .flow__item:nth-child(5) { grid-area: 2 / 4; }
  .flow__item:nth-child(6) { grid-area: 2 / 3; }
  .flow__item:nth-child(7) { grid-area: 2 / 2; }
  .flow__item:nth-child(8) { grid-area: 2 / 1; }
  .flow__item::after { left: auto; right: -23px; top: calc(50% - 6px); transform: none; }
  .flow__item:nth-child(4)::after { right: auto; left: calc(50% - 9px); top: calc(100% + 18px); transform: rotate(90deg); }
  .flow__item:nth-child(n+5)::after { right: auto; left: -23px; transform: rotate(180deg); }
  .flow__item:nth-child(8)::after { left: calc(50% - 9px); top: -30px; transform: rotate(-90deg); }
  .flow__item:last-child::before { content: "retour"; left: calc(50% + 14px); top: -28px; }
  .js .flow__panel::before { content: ""; position: absolute; top: -7px; left: var(--tip, 40px); width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--line); border-left: 1px solid var(--line); transform: rotate(45deg); transition: left .3s var(--ease); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 700px) {
  .fam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
  .gl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-list::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; border-left: 1px solid var(--line); }
  .notes { columns: 2; column-gap: 44px; }
}
@container (min-width: 820px) {
  .data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .rule { grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; }
  .recep { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px 44px; }
  .quote--lead { grid-row: span 2; }
  .contrib { grid-template-columns: 28px minmax(0, 1fr) 250px; }
  .contrib__tips { padding-left: 22px; border-left: 1px solid var(--line); }
  .nf__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }
}
@container (min-width: 880px) {
  .lead__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 980px) {
  .flow-wrap { grid-template-columns: minmax(0, 1fr) 270px; gap: 40px; align-items: start; }
}
@container (max-width: 879px) {
  .lead__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 560px; }
}
@container (max-width: 640px) {
  .infobox { float: none; width: auto; margin: 0 0 26px; }
  .infobox__fig { max-width: 300px; margin-left: auto; margin-right: auto; }
  .gl-group { grid-template-columns: minmax(0, 1fr); }
  .gl-letter { position: static; padding: 18px 0 0; font-size: 2.4rem; border-bottom: 1px solid var(--line); }
  .faq__a { padding: 0 4px 18px 48px; }
  .author { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 700px) {
  .plate { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; gap: 22px; }
}
@container (min-width: 820px) {
  .rt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 600px) {
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td, .tbl--stack tbody th { display: block; width: auto; }
  .tbl--stack caption { display: block; }
  .tbl--stack tbody tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .tbl--stack tbody tr:last-child { border-bottom: 0; }
  .tbl--stack td, .tbl--stack tbody th { padding: 3px 0; border: 0; }
  .tbl--stack tbody th { padding-bottom: 5px; font: 700 1rem/1.35 var(--f-display); }
  .tbl--stack td::before { content: attr(data-label); display: block; margin-bottom: 1px; font: 700 .64rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .tree { padding: 16px 14px 12px; }
  .prose .tree__steps > li { padding-left: 46px; }
  .tree__ans { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
  .approach { display: block; padding: 16px 14px; }
  .approach__photo { float: left; width: 58px; height: 58px; margin: 0 12px 6px 0; padding: 3px; }
  .approach__t { min-height: 58px; align-items: center; }
}
@container (max-width: 560px) {
  .chrono thead { display: none; }
  .chrono tr { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .chrono td { border-bottom: 0; }
  .chrono tr { border-bottom: 1px solid var(--line); }
  .chrono tbody:first-of-type tr:last-child { border-bottom: 0; }
  .chrono__y { width: auto; padding-right: 6px; white-space: normal; line-height: 1.35; }
  .chrono td:nth-child(2) { padding-left: 4px; }
  .chrono td:last-child { grid-column: 2; width: auto; padding: 0 14px 12px 4px; }
  .chrono__sep { display: block !important; }
  .chrono__sep th { display: block; }
  .dt tbody th { padding-right: 10px; }
  .dt__v { font-size: 1.12rem; }
}

/* Mises en page selon l'écran */
@media (min-width: 1100px) {
  .toc__toggle { display: none !important; }
  .toc.is-collapsed .toc__body { display: block; }
}
@media (max-width: 1099px) {
  .hdr__in { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; }
  .hdr__search { margin: 0 auto; }
  .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "toc" "body"; }
  .toc { margin-top: 30px; }
  .toc__in { position: static; display: inline-block; min-width: min(100%, 320px); max-width: 100%; max-height: none; overflow: visible; padding: 14px 20px 14px 16px; border: 1px solid var(--line); background: var(--surface); }
  .toc__head { margin-bottom: 8px; }
  .toc.is-collapsed .toc__head { margin-bottom: 0; }
  .toc.is-collapsed .toc__body { display: none; }
  .toc__bar { display: none; }
  .toc__list { border-left: 0; }
  .toc__list a { padding-left: 0; }
  .toc__list ol a { padding-left: 16px; }
  .toc__meta { display: none; }
}
@media (max-width: 1000px) {
  .brand__sub { display: none; }
}
@media (max-width: 767px) {
  :root { --hdr-h: 58px; }
  .hdr__in { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 8px; padding: 0 8px; }
  .hdr__menu, .hdr__loupe { display: inline-flex; }
  .hdr__nav { display: none; }
  .brand { justify-self: center; }
  .brand__sub { display: block; font-size: .72rem; }
  .brand__name { font-size: 1.06rem; }
  .brand__mark { width: 28px; height: 28px; }
  .hdr__search { display: none; position: absolute; top: 100%; left: 0; right: 0; max-width: none; padding: 10px 16px 12px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 16px rgba(32, 33, 34, .08); }
  .hdr.is-search .hdr__search { display: block; }
  .hdr__search .field__input { height: 46px; font-size: 1rem; }
  .hdr__search .field__kbd { display: none; }
  .tabs__tool { display: none; }
  .tabs__nav a { padding: 11px 9px 10px; }
  .tabs__nav a[aria-current]::after { right: 9px; }
  h1 { margin-top: 22px; }
  .lead__intro { font-size: 1.06rem; }
  .finder__hint kbd, .finder__hint { display: none; }
  .field--lg .field__kbd { display: none; }
  .lead__cta .btn { flex: 1 1 100%; }
  .seg__btn { min-height: 44px; }
  .gl-bar { gap: 6px 14px; padding: 10px 0; }
  .gl-bar__field { flex-basis: 100%; max-width: none; }
  .gl-entry { scroll-margin-top: calc(var(--hdr-h) + 128px); }
  .ftr__in { padding-top: 36px; }
}
@media (min-width: 700px) {
  .ftr__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ftr__in { grid-template-columns: var(--toc-w) repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .ftr__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ftr__about { grid-column: 1 / -1; max-width: 640px; }
}

/* Confort : mouvement réduit */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Impression : navigation masquée, notes et définitions dépliées */
@media print {
  @page { margin: 16mm 14mm; }
  body { font-size: 10.5pt; color: #000; }
  .hdr, .drawer, .toc, .finder, .az, .lead__cta, .tabs, .gl-bar, .gl-empty, .seg, .pop, .skip, .pilcrow, .contrib__actions, .progress, .flow-aside .fig, .card__img, .ftr__net { display: none !important; }
  .page { display: block; max-width: none; padding: 0; }
  .sec { padding-top: 18pt; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .flow__def { display: block !important; margin-top: 8pt; }
  .flow__panel { box-shadow: none !important; }
  .gl-bar, .gl-letter, .chrono thead th { position: static; }
  .notes { columns: 1; }
  .notes a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  a { color: #000; text-decoration: none; }
  h2, h3, h4 { break-after: avoid; }
  .gl-entry, .quote, .card, .fam__item, .dt, .faq__item { break-inside: avoid; }
  .ftr { background: none; }
}
.nf__label { margin-top: 24px; }