/* ==========================================================================
   MECAPEDIA — « L'ENCYCLOPÉDIE DE LA PANNE AUTO »
   Site-locked to mecapedia.fr. Not a fleet template.

   THE DIRECTION
   Plain answers about French cars in what a French driver already knows: an
   encyclopaedia on the shelf (spines read bottom to top, as French books do),
   dictionary entries, the dashboard lights as the Code de la route teaches
   them, the Seyès-ruled exercise book, the procès-verbal of the contrôle
   technique, and a thin tricolore line.

     Bleu      French blue: links, the brand tile, the plates and road signs
     Rouge     the red light and the red of the flag: stop, critical, the ribbon
     Orange    the orange light: have it checked
     Papier    encyclopaedia paper: page and band backgrounds
     Nuit      the instrument cluster and the footer
     Or        gilt lettering on the leather spines

   Four voices of type:
     Source Serif 4         headwords and headlines — the encyclopaedia
     Inter                  reading copy and the interface
     Barlow Semi Condensed  small capitals, like a plate or a road sign
     IBM Plex Mono          fault codes and counts
   ========================================================================== */
:root{
  --bleu:   #1F4FA3;
  --rouge:  #C8102E;
  --orange: #F08A00;
  --papier: #FBF7EE;
  --ink:    #1A1F2B;
  --rule:   #E4DCCB;

  --white:       #FFFFFF;
  --nuit:        #121823;
  --vert:        #2E9E5B;
  --or:          #D3B06A;
  --bleu-deep:   color-mix(in srgb, var(--bleu) 76%, #000000);
  --bleu-tint:   color-mix(in srgb, var(--bleu) 7%, #FFFFFF);
  --bleu-soft:   color-mix(in srgb, var(--bleu) 18%, #FFFFFF);
  --rouge-deep:  color-mix(in srgb, var(--rouge) 80%, #000000);
  --rouge-tint:  color-mix(in srgb, var(--rouge) 7%, #FFFFFF);
  --orange-ink:  color-mix(in srgb, var(--orange) 55%, #3A2200);
  --orange-tint: color-mix(in srgb, var(--orange) 12%, #FFFFFF);
  --papier-deep: color-mix(in srgb, var(--papier) 82%, #B9A27C);
  --ink-2:       color-mix(in srgb, var(--ink) 86%, #FFFFFF);
  --ink-3:       color-mix(in srgb, var(--ink) 66%, #FFFFFF);
  --ink-4:       color-mix(in srgb, var(--ink) 48%, #FFFFFF);
  --rule-2:      color-mix(in srgb, var(--rule) 55%, #FFFFFF);
  --rule-strong: color-mix(in srgb, var(--rule) 55%, #8B7C64);
  --foot-ink:    #DCE1EA;
  --foot-mute:   #9AA4B5;
  --foot-rule:   rgba(255,255,255,.13);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:  1280px;
  --read:       720px;
  --measure:    68ch;
  --radius:     6px;
  --radius-lg:  12px;
  --base-size:  18px;
  --base-lh:    1.68;
  --ease:       cubic-bezier(.2,.6,.3,1);
  --t:          150ms;
}

html, body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--papier); color:var(--ink);
  font-family:var(--font-body); font-size:var(--base-size); line-height:var(--base-lh);
  font-kerning:normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; }
svg{ display:block; }
a{ color:var(--bleu-deep); text-decoration:none; }
a:hover{ color:var(--rouge); }
:focus-visible{ outline:2px solid var(--bleu); outline-offset:3px; }
::selection{ background:var(--bleu-soft); color:var(--ink); }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,48px); position:relative; }
.container .container{ max-width:none; padding-inline:0; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--bleu); color:#fff; padding:.7rem 1.1rem; font-weight:700; }
.skip-link:focus{ left:0; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[id]{ scroll-margin-top:96px; }

/* --- The label voice: condensed small capitals, like a plate. ------------ */
.label, .lk-desc, .finder-label, .finder-terms span, .tp-facts span, .band-more, .gd-tag, .gd-go, .foot-h, .foot-top-link,
.toc-h, .breadcrumb, .post-card-meta, .result-meta, .results-count, .pl-eyebrow, .eyebrow, .post-cat, .card-tag, .pc-tag,
.post-links h2, .chip, .section-cap, .stat .l, .article-body thead th, .article-body .pro-tip::before,
.article-body .related-inline-link::before, .pagination, .src-org, .dash-cap, .en-tome, .en-more summary, .mk-n, .pv-head,
.pv-name, .dash-rule, .sp-tome, .sp-n, .ct-links a, .chip-facet{
  font-family:var(--font-label); font-weight:600; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; line-height:1.35;
}

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.012em; margin:0; color:var(--ink); font-optical-sizing:auto; }
p{ margin:0 0 1rem; }
.muted{ color:var(--ink-3); }
.accent{ color:var(--rouge); font-style:normal; }
.center{ text-align:center; }
.display{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; }
.lead{ font-size:1.12rem; line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.eyebrow{ display:inline-block; color:var(--rouge); margin-bottom:.6rem; }

/* --- The brand mark: a serif M on French blue, a red ribbon ------------- */
.mark{ width:42px; height:42px; flex:none; }
.mark-lg{ width:52px; height:52px; }
.mk-tile{ fill:var(--bleu); }
.mk-ribbon{ fill:var(--rouge); }
.mk-m{ fill:#FFFFFF; font-family:"Source Serif 4", Georgia, serif; font-weight:700; font-size:24px; }
.lk-word{ display:flex; align-items:baseline; font-family:var(--font-display); line-height:1; }
.lk-w1{ font-weight:800; font-size:1.62rem; letter-spacing:-.02em; text-transform:capitalize; color:var(--ink); }
.lk-w2{ font-weight:500; font-style:italic; font-size:1.62rem; letter-spacing:-.01em; color:var(--bleu); }
.mark-lg + .lk-word .lk-w1{ font-size:1.95rem; color:#FFFFFF; }
.mark-lg + .lk-word .lk-w2{ font-size:1.95rem; color:#9DB8EA; }
.lk-text{ display:flex; flex-direction:column; gap:.22rem; min-width:0; margin-left:.6rem; padding-left:.95rem; border-left:1px solid var(--rule-strong); }
.lk-name{ font-family:var(--font-display); font-weight:700; font-size:1.38rem; line-height:1; color:var(--ink); white-space:nowrap; }
.lk-desc{ font-size:.66rem; letter-spacing:.08em; color:var(--ink-3); max-width:22ch; }
.lk-img{ height:42px; width:auto; }

/* --- The top line, with its tricolore thread ----------------------------- */
.topline{ position:relative; background:var(--nuit); color:#E7EAF0; }
.topline-in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:34px; }
.topline-what, .topline-asof{ font-family:var(--font-label); font-weight:600; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; line-height:1.3; }
.topline-asof{ white-space:nowrap; color:#B9C9EC; }
.tricolore{ display:block; height:3px; background:linear-gradient(90deg, var(--bleu) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--rouge) 66.66% 100%); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--papier) 94%, #FFFFFF); border-bottom:1px solid var(--rule); transition:box-shadow var(--t) var(--ease); }
.site-header.is-scrolled{ box-shadow:0 10px 24px -20px rgba(26,31,43,.5); }
.nav{ display:flex; align-items:center; gap:1.3rem; min-height:76px; }
.nav-brand{ display:flex; align-items:center; gap:.65rem; color:var(--ink); flex:none; }
.nav-brand:hover{ color:var(--ink); }
.nav-links{ display:flex; align-items:center; gap:1.25rem; margin-left:auto; }
.nav-link{ position:relative; padding:.4rem 0; color:var(--ink-2); font-weight:500; font-size:.93rem; white-space:nowrap; }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--rouge); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease); }
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-tail{ display:flex; align-items:center; gap:.6rem; }
.nav-search{ display:flex; align-items:center; height:40px; background:var(--white); border:1.5px solid var(--rule-strong); border-radius:8px; overflow:hidden; }
.nav-search input{ width:140px; border:0; outline:0; background:transparent; padding:0 .3rem 0 .9rem; font:inherit; font-size:.92rem; color:var(--ink); }
.nav-search button{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:0; background:transparent; color:var(--bleu); cursor:pointer; }
.nav-search button svg{ width:18px; height:18px; }
.nav-search:focus-within{ border-color:var(--bleu); }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:1.5px solid var(--rule-strong); border-radius:8px; background:var(--white); cursor:pointer; }
.nav-burger, .nav-burger::before, .nav-burger::after{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; transition:transform var(--t) var(--ease); }
.nav-burger::before, .nav-burger::after{ content:""; position:absolute; left:0; }
.nav-burger::before{ top:-6px; }
.nav-burger::after{ top:6px; }
.site-header.is-open .nav-burger{ background:transparent; }
.site-header.is-open .nav-burger::before{ transform:translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger::after{ transform:translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   TITLE PAGE — the dictionary entry, the dashboard
   ========================================================================== */
.title-page{
  position:relative;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--bleu) 8%, transparent) 0%, transparent 60%),
    var(--papier);
  padding:clamp(40px,5.4vw,76px) 0 clamp(44px,5.4vw,80px);
  border-bottom:1px solid var(--rule);
}
.tp-grid{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(28px,4.6vw,76px); align-items:center; }
.tp-kicker{ color:var(--rouge); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; }
.tp-kicker::before{ content:""; width:26px; height:2px; background:var(--rouge); flex:none; }
.tp-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(3.1rem,7vw,5.8rem); line-height:.92; letter-spacing:-.035em; margin:0; color:var(--ink); }
@media (min-width:600px){ .tp-title{ white-space:nowrap; } }
.tp-wordmark .wm{ display:inline; }
.tp-wordmark .wm-first{ text-transform:capitalize; color:var(--ink); }
.tp-wordmark .wm-last{ font-weight:500; font-style:italic; color:var(--bleu); letter-spacing:-.02em; }
.tp-wordmark.is-spaced .wm-last{ margin-left:0; }
.tp-def{ margin:1.1rem 0 0; padding-left:.9rem; border-left:3px solid var(--rule-strong); font-family:var(--font-display); font-size:1.1rem; line-height:1.5; color:var(--ink-2); max-width:52ch; }
.tp-def-word{ font-weight:700; color:var(--ink); }
.tp-def-gram{ font-style:italic; color:var(--ink-3); }
.tp-lead{ margin:1.1rem 0 0; font-size:1.1rem; line-height:1.6; color:var(--ink-2); max-width:54ch; }
.finder{ margin-top:1.7rem; max-width:600px; }
.finder-label{ display:block; color:var(--ink-3); margin-bottom:.55rem; }
.finder-row{ display:flex; align-items:stretch; background:var(--white); border:2px solid var(--bleu); border-radius:10px; overflow:hidden; box-shadow:0 16px 30px -24px rgba(31,79,163,.6); }
.finder-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:.95rem 1.05rem; font:inherit; font-size:1.02rem; color:var(--ink); }
.finder-go{ display:flex; align-items:center; gap:.6rem; padding:0 1.35rem; border:0; background:var(--bleu); color:#FFFFFF; cursor:pointer;
  font-family:var(--font-label); font-weight:700; font-size:.95rem; letter-spacing:.09em; text-transform:uppercase; transition:background var(--t) var(--ease); }
.finder-go svg{ width:22px; height:12px; }
.finder-go:hover{ background:var(--bleu-deep); }
.finder-terms{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; margin:.95rem 0 0; }
.finder-terms span{ color:var(--ink-3); margin-right:.2rem; }
.finder-terms a{ padding:.26rem .7rem; border:1px solid var(--rule-strong); border-radius:6px; background:var(--white); font-size:.9rem; color:var(--ink-2); }
.finder-terms a:hover{ border-color:var(--bleu); color:var(--bleu-deep); }
.tp-facts{ display:flex; flex-wrap:wrap; margin:1.7rem 0 0; }
.tp-facts span{ color:var(--ink-3); padding-right:1.4rem; margin-right:1.4rem; border-right:1px solid var(--rule-strong); }
.tp-facts span:last-child{ border-right:0; margin-right:0; padding-right:0; }
.tp-facts strong{ display:block; margin-bottom:.1rem; font-family:var(--font-display); font-weight:700; font-size:1.95rem; letter-spacing:-.02em; text-transform:none; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }

/* --- The dashboard ----------------------------------------------------------- */
.dash{ margin:0; justify-self:end; width:min(100%,560px); }
.dash-panel{
  padding:clamp(18px,2vw,26px); border-radius:24px; color:#E8ECF2;
  background:radial-gradient(120% 90% at 50% 0%, #1E2635 0%, #10151E 70%);
  border:1px solid #0A0E14; box-shadow:inset 0 0 0 6px #1A2130, inset 0 2px 0 rgba(255,255,255,.06), 0 30px 50px -34px rgba(18,24,35,.85);
}
.dash-head{ margin:0 0 .9rem; font-family:var(--font-display); font-weight:700; font-size:1.55rem; line-height:1.15; color:#FFFFFF; }
.dash-rule{ display:flex; align-items:center; gap:.55rem; margin:.9rem 0 .55rem; font-size:.72rem; color:#C4CCD8; }
.dash-dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.dash-rule.is-rouge .dash-dot{ background:#FF3B3B; box-shadow:0 0 10px rgba(255,59,59,.85); }
.dash-rule.is-orange .dash-dot{ background:#FFA21A; box-shadow:0 0 10px rgba(255,162,26,.85); }
.dash-rule.is-vert .dash-dot{ background:#3BD37A; box-shadow:0 0 10px rgba(59,211,122,.8); }
.dash-rule.is-vert{ margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.08); }
.lamps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.lamp{ display:flex; flex-direction:column; align-items:center; gap:.35rem; height:100%; padding:.65rem .3rem .55rem; border-radius:12px; background:rgba(255,255,255,.03); color:#E8ECF2; text-align:center; transition:background var(--t) var(--ease); }
.lamp:hover{ background:rgba(255,255,255,.09); color:#FFFFFF; }
.lamp-ic svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lamps.is-rouge .lamp-ic{ color:#FF4A4A; filter:drop-shadow(0 0 6px rgba(255,59,59,.7)); }
.lamps.is-orange .lamp-ic{ color:#FFA726; filter:drop-shadow(0 0 6px rgba(255,162,26,.65)); }
.lp-txt{ font-family:var(--font-label); font-weight:700; font-size:5.2px; fill:currentColor; stroke:none; letter-spacing:.02em; }
.lamp-name{ font-size:.78rem; line-height:1.25; font-weight:500; }
.dash-cap{ margin:.85rem 0 0; color:var(--ink-3); font-size:.72rem; }

/* ==========================================================================
   BANDS
   ========================================================================== */
.band{ padding:clamp(56px,7vw,100px) 0; }
.band-head{ margin-bottom:clamp(26px,3vw,40px); max-width:78ch; }
.band-head .label{ color:var(--rouge); margin:0 0 .7rem; display:flex; align-items:center; gap:.7rem; }
.band-head .label::before{ content:""; width:22px; height:2px; background:var(--rouge); flex:none; }
.band-title{ font-size:clamp(2rem,3.6vw,2.95rem); line-height:1.06; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.band-note{ margin:1rem 0 0; color:var(--ink-3); font-size:1.03rem; line-height:1.6; max-width:66ch; }
.band-head-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.4rem 2rem; max-width:none; }
.band-head-row .label{ grid-column:1 / -1; }
.band-more{ color:var(--bleu-deep); padding-bottom:.5rem; white-space:nowrap; }
.band-more:hover{ color:var(--rouge); }

/* --- The shelf of tomes -------------------------------------------------------- */
.shelf-band{ background:var(--white); }
.shelf{
  list-style:none; margin:0 0 clamp(36px,4vw,56px); padding:18px 18px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end;
  background:linear-gradient(180deg, transparent calc(100% - 16px), #8A6A45 calc(100% - 16px), #6E5233 100%);
  border-radius:4px;
}
.spine{ flex:1 1 74px; max-width:96px; min-width:64px; }
.spine a{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.5rem;
  height:232px; margin-bottom:16px; padding:.75rem .35rem .7rem; border-radius:3px 3px 1px 1px; color:var(--or);
  background:linear-gradient(90deg, rgba(0,0,0,.28) 0, rgba(255,255,255,.08) 18%, rgba(0,0,0,0) 40%, rgba(0,0,0,.18) 100%), var(--cuir, #6B1D2A);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), 0 6px 10px -6px rgba(0,0,0,.6);
  transition:transform var(--t) var(--ease);
}
.spine a::before, .spine a::after{ content:""; position:absolute; left:6px; right:6px; height:5px; border-top:1px solid rgba(211,176,106,.75); border-bottom:1px solid rgba(211,176,106,.75); }
.spine a::before{ top:34px; }
.spine a::after{ bottom:34px; }
.spine a:hover{ transform:translateY(-8px); color:#F0D69B; }
.sp-0{ --cuir:#6B1D2A; } .sp-1{ --cuir:#1C2A48; } .sp-2{ --cuir:#1F4A3A; } .sp-3{ --cuir:#5A3A22; }
.sp-tome{ font-size:.66rem; letter-spacing:.1em; white-space:nowrap; }
.sp-title{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.1; text-align:center; max-height:150px; overflow:hidden; }
.sp-n{ font-size:.68rem; font-family:var(--font-mono); letter-spacing:0; }

/* --- The entries: one dictionary entry per tome --------------------------- */
.entries{ columns:3 330px; column-gap:clamp(18px,2vw,28px); }
.entry{ break-inside:avoid; margin:0 0 clamp(18px,2vw,28px); padding:1.15rem 1.3rem 1rem; background:var(--papier); border:1px solid var(--rule); border-top:3px solid var(--ink); border-radius:2px var(--radius) var(--radius) var(--radius); }
.en-tome{ margin:0 0 .3rem; color:var(--rouge); font-size:.68rem; }
.en-title{ font-size:1.42rem; line-height:1.12; color:var(--ink); }
.en-def{ margin:.55rem 0 .8rem; font-family:var(--font-display); font-size:.98rem; line-height:1.5; color:var(--ink-2); }
.en-word{ font-weight:700; font-variant:small-caps; letter-spacing:.02em; color:var(--ink); }
.en-gram{ font-style:italic; color:var(--ink-3); }
.en-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-strong); }
.en-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.15rem .7rem; padding:.55rem 0; border-bottom:1px solid var(--rule-2); }
.en-row:last-child{ border-bottom:0; }
.en-main{ font-weight:600; font-size:.97rem; line-height:1.35; color:var(--ink); }
.en-main:hover{ color:var(--bleu-deep); text-decoration:underline; text-underline-offset:3px; }
.en-n{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-4); font-variant-numeric:tabular-nums; }
.en-chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
.en-chips a{ font-size:.78rem; line-height:1.3; padding:.12rem .5rem; border-radius:4px; border:1px solid var(--rule-strong); color:var(--ink-3); background:var(--white); }
.en-chips a:hover{ border-color:var(--bleu); color:var(--bleu-deep); }
.en-chips .chip-part{ font-family:var(--font-mono); min-width:1.8rem; text-align:center; }
.en-chips .chip-facet{ font-size:.66rem; color:var(--rouge-deep); border-color:color-mix(in srgb, var(--rouge) 35%, #FFFFFF); }
.en-chips .chip-make{ background:var(--bleu-tint); border-color:var(--bleu-soft); color:var(--bleu-deep); }
.en-more{ margin-top:.5rem; border-top:1px dashed var(--rule-strong); }
.en-more summary{ list-style:none; cursor:pointer; padding:.7rem 0 .25rem; color:var(--ink); display:flex; align-items:center; gap:.4rem; }
.en-more summary::-webkit-details-marker{ display:none; }
.en-more summary::before{ content:"+"; font-family:var(--font-display); font-size:1.15rem; line-height:1; color:var(--rouge); }
.en-more[open] summary::before{ content:"–"; }
.en-more summary span{ color:var(--ink-4); }
.en-other{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:1.2rem 0 0; }
.en-other a span{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-4); }

/* --- Fault codes: index cards on a Seyès page --------------------------------- */
.codes{
  background-color:#FFFFFF;
  background-image:
    linear-gradient(90deg, transparent 70px, rgba(200,16,46,.45) 70px, rgba(200,16,46,.45) 72px, transparent 72px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(122,112,194,.22) 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(122,112,194,.34) 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(150,170,214,.22) 7px 8px);
}
.codes-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.4vw,72px); align-items:start; }
.codes .band-head{ background:rgba(255,255,255,.88); padding:1rem 1.1rem 1.2rem; border-radius:var(--radius); }
.code-find{ display:flex; align-items:stretch; max-width:460px; margin:1.4rem 0 0; border:2px solid var(--ink); border-radius:8px; overflow:hidden; background:var(--white); }
.code-find input{ flex:1; min-width:0; border:0; outline:0; padding:.85rem 1rem; font:inherit; font-family:var(--font-mono); font-size:.98rem; color:var(--ink); background:transparent; }
.code-find button{ border:0; background:var(--ink); color:#fff; padding:0 1.15rem; cursor:pointer; font-family:var(--font-label); font-weight:700; font-size:.9rem; letter-spacing:.09em; text-transform:uppercase; }
.code-find button:hover{ background:var(--bleu); }
.fiches{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px; }
.fiche{
  position:relative; display:flex; flex-direction:column; gap:.35rem; height:100%; padding:.75rem .9rem .85rem; color:var(--ink);
  background:repeating-linear-gradient(180deg, #FFFFFF 0 23px, #CFDBF2 23px 24px); background-position:0 30px;
  border-top:3px solid var(--rouge); border-radius:2px; box-shadow:0 1px 0 rgba(0,0,0,.06), 0 10px 18px -14px rgba(26,31,43,.55);
  transition:transform var(--t) var(--ease);
}
.fiches li:nth-child(odd) .fiche{ transform:rotate(-.6deg); }
.fiches li:nth-child(even) .fiche{ transform:rotate(.5deg); }
.fiche:hover{ transform:rotate(0) translateY(-3px); color:var(--ink); }
.fi-code{ font-family:var(--font-mono); font-weight:600; font-size:1.25rem; line-height:1.2; color:var(--rouge-deep); background:#FFFFFF; align-self:flex-start; }
.fi-what{ font-size:.92rem; line-height:24px; color:var(--ink-2); }
.fiche:hover .fi-what{ color:var(--bleu-deep); }

/* --- Contrôle technique: the procès-verbal ------------------------------------ */
.ct{ background:var(--papier); }
.ct-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px,4.4vw,72px); align-items:start; }
.ct-links{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.ct-links a{ display:inline-block; padding:.35rem .75rem; border:1.5px solid var(--bleu); border-radius:6px; color:var(--bleu-deep); background:var(--white); font-size:.74rem; }
.ct-links a:hover{ background:var(--bleu); color:#FFFFFF; }
.pv{ position:relative; background:var(--white); border:1px solid var(--rule-strong); border-radius:4px; box-shadow:0 22px 36px -30px rgba(26,31,43,.6); }
.pv-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0; padding:.85rem 1.2rem; border-bottom:2px solid var(--ink); font-size:.82rem; color:var(--ink); }
.pv-stamp{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; border:2.5px solid var(--bleu); color:var(--bleu); font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:0; transform:rotate(-12deg); }
.pv-levels{ list-style:none; margin:0; padding:.4rem 1.2rem; }
.pv-levels li{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:.3rem 1.2rem; padding:1rem 0 1rem .9rem; border-bottom:1px solid var(--rule-2); border-left:5px solid var(--rule-strong); }
.pv-levels li:last-child{ border-bottom:0; }
.pv-mineure{ border-left-color:#6E8BC0 !important; }
.pv-majeure{ border-left-color:var(--orange) !important; }
.pv-critique{ border-left-color:var(--rouge) !important; }
.pv-name{ font-size:.86rem; color:var(--ink); padding-top:.1rem; }
.pv-critique .pv-name{ color:var(--rouge-deep); }
.pv-text{ font-size:.97rem; line-height:1.55; color:var(--ink-2); }
.pv-foot{ margin:0; padding:.85rem 1.2rem 1rem; background:var(--bleu-tint); border-top:1px solid var(--rule); font-size:.95rem; color:var(--ink-2); }

/* --- Make by make --------------------------------------------------------------- */
.marques{ background:var(--white); }
.mk-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); }
.mk{ display:flex; flex-direction:column; gap:.4rem; padding:1rem 1.15rem 1.1rem; background:var(--papier); border:1px solid var(--rule); border-radius:var(--radius-lg); }
.mk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; margin:0; }
.mk-name{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.15; color:var(--ink); }
.mk-n{ color:var(--ink-4); font-size:.68rem; white-space:nowrap; }
.mk-eng{ margin:0; font-family:var(--font-mono); font-size:.8rem; color:var(--bleu-deep); }
.mk-links{ display:flex; flex-wrap:wrap; gap:.32rem .35rem; margin:.25rem 0 0; }
.mk-links a{ padding:.16rem .6rem; border-radius:4px; background:var(--white); border:1px solid var(--rule-strong); font-size:.84rem; color:var(--ink-2); }
.mk-links a.is-reli{ background:var(--bleu); border-color:var(--bleu); color:#FFFFFF; }
.mk-links a:hover{ border-color:var(--rouge); color:var(--rouge); }
.mk-links a.is-reli:hover{ background:var(--bleu-deep); color:#FFFFFF; }

/* --- Common questions ---------------------------------------------------- */
.questions{ background:var(--papier); }
.diag-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr); gap:clamp(28px,4vw,72px); align-items:start; }
.symptoms{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
.symptoms a{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; height:100%; padding:.9rem 1.05rem; border-radius:8px; background:var(--white); border:1px solid var(--rule); color:var(--ink); font-weight:600; font-size:.99rem; line-height:1.38; transition:border-color var(--t) var(--ease); }
.symptoms a:hover{ border-color:var(--bleu); color:var(--bleu-deep); }
.sy-go{ flex:none; color:var(--rouge); transition:transform var(--t) var(--ease); }
.symptoms a:hover .sy-go{ transform:translateX(3px); }

/* --- Essential guides ------------------------------------------------------ */
.guides{ background:var(--white); }
.gd-grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px,3.4vw,56px); }
.gd-lead{ position:relative; padding:clamp(22px,2.6vw,36px); border-radius:var(--radius-lg); background:var(--bleu); color:#E3EAF8; overflow:hidden; }
.gd-lead::after{ content:""; position:absolute; right:22px; top:0; width:14px; height:56px; background:var(--rouge); clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }
.gd-tag{ color:#C9D8F5; margin:0 0 .8rem; }
.gd-lead-title{ font-size:clamp(1.75rem,3vw,2.45rem); line-height:1.08; letter-spacing:-.02em; padding-right:30px; }
.gd-lead-title a{ color:#FFFFFF; }
.gd-lead-title a:hover{ color:#FFE7A8; }
.gd-lead-ex{ margin:1rem 0 0; color:#D5DFF4; font-size:1.03rem; line-height:1.62; }
.gd-go{ display:inline-block; margin-top:1.2rem; color:#FFE7A8; }
.gd-go:hover{ color:#FFFFFF; }
.gd-side{ display:flex; flex-direction:column; }
.gd-med{ padding:0 0 1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule); }
.gd-med:last-child{ border-bottom:0; margin-bottom:0; }
.gd-med h3{ font-size:1.25rem; line-height:1.24; }
.gd-med h3 a{ color:var(--ink); }
.gd-med h3 a:hover{ color:var(--bleu-deep); }
.gd-med p{ margin:.45rem 0 0; font-size:.96rem; line-height:1.55; color:var(--ink-3); }
.gd-list{ list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:2rem; border-top:2px solid var(--ink); }
.gd-list li{ border-bottom:1px solid var(--rule); }
.gd-list a{ display:block; padding:.8rem 0; color:var(--ink); font-weight:500; line-height:1.38; }
.gd-list a:hover{ color:var(--bleu-deep); }

/* --- Latest -------------------------------------------------------------- */
.latest{ background:var(--papier); }
.latest .section{ padding:0; }
.latest .section-head h2{ font-size:clamp(1.75rem,3vw,2.35rem); color:var(--ink); }
.is-home .latest .post-grid > .post-card:nth-child(n+9){ display:none; }

/* --- Charter · official sources ------------------------------------------------ */
.trust{ background:var(--white); }
.trust-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,4.4vw,72px); align-items:start; }
.pr-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.pr-list li{ display:flex; flex-direction:column; padding:1.25rem 1.35rem; border-radius:var(--radius-lg); background:var(--papier); border:1px solid var(--rule); }
.pr-no{ align-self:flex-start; font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.05rem; color:var(--rouge); }
.pr-h{ margin:.5rem 0 .4rem; font-size:1.2rem; line-height:1.22; color:var(--ink); }
.pr-p{ margin:0; font-size:.96rem; line-height:1.6; color:var(--ink-3); }
.src{ padding:clamp(20px,2.4vw,30px); background:var(--papier); color:var(--ink); border-radius:var(--radius-lg); border:1px solid var(--rule); border-top:4px solid var(--bleu); }
.src-h{ font-size:1.55rem; color:var(--ink); margin:0 0 .5rem; }
.src-lead{ margin:0 0 1rem; font-size:.95rem; line-height:1.55; color:var(--ink-3); }
.src-list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.src-list li{ border-bottom:1px solid var(--rule-2); }
.src-list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem; padding:.75rem 0; color:var(--ink); }
.src-name{ font-weight:600; line-height:1.35; }
.src-org{ grid-column:1; color:var(--ink-3); font-size:.68rem; }
.src-go{ grid-row:1 / 3; grid-column:2; align-self:center; color:var(--bleu); }
.src-list a:hover .src-name{ color:var(--bleu-deep); text-decoration:underline; text-underline-offset:3px; }
.src-note{ margin:.9rem 0 0; font-size:.86rem; line-height:1.55; color:var(--ink-3); }

/* ==========================================================================
   CARDS — post grid, pillar grid, generic cards
   ========================================================================== */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.post-card{ display:flex; flex-direction:column; min-width:0; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.post-card:hover{ border-color:var(--bleu-soft); box-shadow:0 14px 30px -24px rgba(26,31,43,.45); }
.post-card-media{ display:none; }
.post-card-body{ padding:1.15rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.post-cat{ color:var(--rouge); }
.post-card-title{ font-size:1.2rem; line-height:1.26; margin:0; }
.post-card-title a{ color:var(--ink); }
.post-card-title a:hover{ color:var(--bleu-deep); }
.post-card-excerpt{ margin:0; font-size:.95rem; line-height:1.52; color:var(--ink-3); }
.post-card-meta{ margin-top:auto; padding-top:.7rem; color:var(--ink-3); font-size:.7rem; }
.card-grid, .pillar-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:clamp(18px,2vw,26px); }
.card, .pillar-card{ display:block; padding:1.3rem 1.35rem 1.4rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); color:var(--ink); transition:border-color var(--t) var(--ease); }
.card:hover, .pillar-card:hover{ border-color:var(--bleu); color:var(--ink); }
.card-tag, .pc-tag{ display:block; color:var(--rouge); margin-bottom:.6rem; }
.card h3, .pillar-card h3{ font-size:1.2rem; line-height:1.28; margin:0; }
.pc-arrow{ display:inline-block; margin-top:.8rem; color:var(--ink-4); }
.card:hover .pc-arrow, .pillar-card:hover .pc-arrow{ color:var(--bleu); }
.blk-more{ margin-top:1.8rem; }

/* ==========================================================================
   BUTTONS · CHIPS · PAGINATION
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; font-family:var(--font-label); font-size:.92rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; border:1.5px solid transparent; border-radius:8px; cursor:pointer; transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn--accent{ background:var(--bleu); color:#fff; }
.btn--accent:hover{ background:var(--bleu-deep); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--bleu); color:var(--bleu-deep); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.chip{ display:inline-block; padding:.4rem .8rem; border-radius:6px; border:1px solid var(--rule-strong); background:var(--white); color:var(--ink-2); transition:border-color var(--t) var(--ease), color var(--t) var(--ease); }
.chip:hover{ color:var(--bleu-deep); border-color:var(--bleu); }
.pagination{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule); color:var(--ink-3); }
.pagination a{ padding:.65rem 1.15rem; border:1.5px solid var(--ink); border-radius:8px; color:var(--ink); }
.pagination a:hover{ border-color:var(--bleu); color:var(--bleu-deep); }
.pagination span{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   PAGE SHELL — list, search, topic, legal, about/contact, 404
   ========================================================================== */
.page-shell{ padding:clamp(28px,4vw,52px) 0 clamp(60px,7vw,100px); background:var(--papier); }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; margin-bottom:1.6rem; color:var(--ink-3); font-size:.74rem; }
.breadcrumb a{ color:var(--ink-3); }
.breadcrumb a:hover{ color:var(--bleu-deep); }
.breadcrumb [aria-hidden="true"]{ color:var(--rouge); }
.breadcrumb [aria-current="page"], .breadcrumb > span:last-child{ color:var(--ink-4); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-shell h1.display{ font-size:clamp(2.15rem,4.3vw,3.3rem); line-height:1.04; letter-spacing:-.025em; margin:0; color:var(--ink); text-wrap:balance; }
.page-shell h1.display::first-letter{ text-transform:uppercase; }
.page-shell .section{ padding:clamp(32px,4vw,52px) 0 0; }
.page-shell .section-head h2{ font-size:clamp(1.45rem,2.4vw,1.85rem); }
.results-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; padding-bottom:1.1rem; border-bottom:2px solid var(--ink); }
.results-head h1{ font-size:clamp(1.8rem,3.4vw,2.5rem); margin:0; color:var(--ink); }
.results-count{ color:var(--ink-3); }
.results-list{ display:flex; flex-direction:column; }
.result{ display:block; padding:1.3rem 0; border-bottom:1px solid var(--rule); color:var(--ink); }
.result h2{ font-size:1.3rem; line-height:1.28; margin:0; color:var(--ink); }
.result:hover h2{ color:var(--bleu-deep); }
.result p{ margin:.45rem 0 0; font-size:.98rem; line-height:1.55; color:var(--ink-3); max-width:76ch; }
.result-meta{ display:flex; gap:.9rem; margin-top:.6rem; color:var(--ink-4); font-size:.7rem; }
.topic-index{ margin-top:2.6rem; }
.topic-index-head{ margin-bottom:1.1rem; padding-bottom:.8rem; border-bottom:2px solid var(--ink); }
.topic-index-head p{ margin:.35rem 0 0; color:var(--ink-3); font-size:.95rem; }
.topic-index-list{ columns:2 320px; column-gap:2.5rem; }
.topic-index-list a{ display:block; break-inside:avoid; padding:.7rem 0; border-bottom:1px solid var(--rule-2); color:var(--ink-2); font-size:1rem; line-height:1.4; }
.topic-index-list a:hover{ color:var(--bleu-deep); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article{ padding-bottom:1rem; }
.article-hero{ margin-bottom:clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px); border-bottom:2px solid var(--ink); }
.article-hero-grid{ display:block; }
.article-hero-copy h1{ font-size:clamp(2.15rem,4.3vw,3.4rem); line-height:1.04; letter-spacing:-.025em; margin:.2rem 0 0; max-width:24ch; color:var(--ink); text-wrap:balance; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.1rem; font-size:.98rem; color:var(--ink-3); }
.post-meta [aria-hidden="true"]{ color:var(--rouge); }
.post-meta time{ font-variant-numeric:tabular-nums; }
.post-meta strong{ color:var(--ink); font-weight:600; }
.article-lead{ margin:1.2rem 0 0; font-size:1.2rem; line-height:1.56; color:var(--ink-2); max-width:60ch; }
.article-hero-media{ display:none; }
.article-shell{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.article-shell:has(.toc){ grid-template-columns:240px minmax(0,1fr); }
.article-shell:not(:has(.toc)){ justify-items:center; }
.article-main{ min-width:0; max-width:var(--read); width:100%; overflow-wrap:break-word; contain:inline-size; }
.toc{ position:sticky; top:100px; padding:1rem 1.1rem .5rem; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--rule); }
.toc-h{ margin:0 0 .4rem; padding-bottom:.6rem; color:var(--rouge); border-bottom:2px solid var(--ink); }
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; border-bottom:1px solid var(--rule-2); }
.toc li:last-child{ border-bottom:0; }
.toc a{ display:grid; grid-template-columns:1.7rem minmax(0,1fr); gap:.3rem; padding:.58rem 0; font-size:.93rem; line-height:1.4; color:var(--ink-2); }
.toc a::before{ content:counter(toc); font-family:var(--font-display); font-style:italic; font-weight:600; font-size:.95rem; line-height:1.5; color:var(--bleu); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--bleu-deep); }
.article-rail{ min-width:0; }
.article-body{ font-size:1rem; line-height:var(--base-lh); color:var(--ink-2); hyphens:auto; -webkit-hyphens:auto; }
.article-body > *:first-child{ margin-top:0; }
.article-body p{ margin:0 0 1.15rem; }
.article-body h2{ margin:2.7rem 0 1rem; padding-top:1.3rem; border-top:1px solid var(--rule); font-size:clamp(1.6rem,2.6vw,2.05rem); line-height:1.14; letter-spacing:-.02em; color:var(--ink); hyphens:manual; }
.article-body > h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article-body h3{ margin:2rem 0 .6rem; font-size:1.3rem; line-height:1.26; hyphens:manual; }
.article-body h4{ margin:1.5rem 0 .45rem; font-family:var(--font-body); font-weight:700; font-size:1.04rem; letter-spacing:0; }
.article-body a{ color:var(--bleu-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--bleu) 45%, transparent); }
.article-body a:hover{ color:var(--rouge); text-decoration-color:currentColor; }
.article-body strong{ color:var(--ink); font-weight:650; }
.article-body ul, .article-body ol{ list-style:none; margin:0 0 1.35rem; padding:0; }
.article-body ul > li{ position:relative; padding-left:1.45rem; margin-bottom:.5rem; }
.article-body ul > li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--rouge); font-weight:600; }
.article-body ol{ counter-reset:step; }
.article-body ol > li{ counter-increment:step; position:relative; padding-left:2.3rem; margin-bottom:.65rem; }
.article-body ol > li::before{ content:counter(step); position:absolute; left:0; top:.15em; display:flex; align-items:center; justify-content:center; width:1.55rem; height:1.55rem; border-radius:50%; background:var(--bleu); color:#FFFFFF; font-family:var(--font-display); font-weight:700; font-size:.82rem; line-height:1; font-variant-numeric:tabular-nums; }
.article-body .pro-tip{ margin:1.7rem 0; padding:1rem 1.2rem 1.05rem; background:var(--orange-tint); border-left:4px solid var(--orange); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink); }
.article-body .pro-tip::before{ content:"Bon à savoir"; display:block; margin-bottom:.35rem; color:var(--orange-ink); }
.article-body .related-inline-link{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; margin:1.5rem 0; padding:.8rem 1rem; font-size:0; background:var(--bleu-tint); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body .related-inline-link::before{ content:"Voir aussi"; font-size:.72rem; color:var(--ink-3); }
.article-body .related-inline-link a{ font-size:1rem; font-weight:600; text-decoration:none; }
.article-body .related-inline-link a:hover{ text-decoration:underline; }
.article-body blockquote{ margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:4px solid var(--bleu); color:var(--ink); font-family:var(--font-display); font-style:italic; font-size:1.22rem; line-height:1.5; }
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body img{ border:1px solid var(--rule); border-radius:var(--radius); }
.article-body hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }
.article-body code{ font-family:var(--font-mono); font-size:.86em; padding:.12em .38em; border-radius:4px; background:var(--white); border:1px solid var(--rule); color:var(--rouge-deep); }
.article-body pre{ margin:1.5rem 0; padding:1rem 1.2rem; overflow-x:auto; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius); }
.article-body pre code{ padding:0; border:0; background:transparent; color:var(--ink); }
.table-wrap{ margin:1.8rem 0; overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius); }
.article-body table{ width:100%; border-collapse:collapse; font-size:.96rem; font-variant-numeric:tabular-nums; background:var(--white); hyphens:manual; }
.article-body th, .article-body td{ padding:.72rem .95rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-2); }
.article-body thead th{ background:var(--bleu); color:#FFFFFF; font-size:.74rem; white-space:nowrap; }
.article-body tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--papier) 60%, #FFFFFF); }
.article-body tbody tr:last-child td{ border-bottom:0; }
.inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin:2.2rem 0; padding:1.3rem 1.4rem; background:var(--white); border:1px solid var(--rule); border-left:4px solid var(--bleu); border-radius:0 var(--radius) var(--radius) 0; }
.inline-cta-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.inline-cta-body strong{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.inline-cta-body span{ font-size:.96rem; color:var(--ink-3); }
.faq{ margin-top:3rem; padding-top:1.3rem; border-top:2px solid var(--ink); }
.faq h2{ font-size:1.8rem; margin:0 0 .8rem; color:var(--ink); }
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{ list-style:none; cursor:pointer; position:relative; padding:1rem 2.6rem 1rem 0; font-weight:600; font-size:1.05rem; line-height:1.42; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:.25rem; top:.55rem; font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1; color:var(--rouge); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--bleu-deep); }
.faq-a{ padding:0 0 1.1rem; }
.faq-a p{ margin:0 0 .8rem; font-size:1rem; line-height:1.68; color:var(--ink-2); }
.faq-a p:last-child{ margin-bottom:0; }
.post-links{ margin-top:3rem; padding-top:1.3rem; border-top:1px solid var(--rule); }
.post-links h2{ margin:0 0 1rem; color:var(--rouge); }
.pillar-link{ display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); color:var(--ink); transition:background var(--t) var(--ease); }
.pillar-link:hover{ background:var(--bleu-tint); color:var(--ink); }
.pl-eyebrow{ display:block; margin-bottom:.25rem; color:var(--rouge); }
.pl-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.22rem; line-height:1.3; color:var(--ink); }
.pl-arrow{ margin-left:auto; color:var(--bleu); font-size:1.2rem; transition:transform var(--t) var(--ease); }
.pillar-link:hover .pl-arrow{ transform:translateX(4px); }

/* ==========================================================================
   BLOCKS — the Pages studio's own components
   ========================================================================== */
.blk{ padding:clamp(44px,6vw,80px) 0; }
.blk-space{ padding:0; }
.section{ padding:clamp(44px,6vw,80px) 0; }
.section-head{ margin-bottom:1.8rem; }
.section-cap{ color:var(--ink-3); }
.blk-hero .hero, .hero{ padding:clamp(40px,6vw,88px) 0; }
.hero-inner{ display:grid; gap:clamp(24px,3vw,48px); align-items:center; }
.hero h1{ font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.04; letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.hero .lead{ margin-top:1.1rem; color:var(--ink-3); }
.hero-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-prose, .blk-text{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); hyphens:auto; }
.blk-prose h2, .blk-text h2{ font-size:1.8rem; margin:2rem 0 .9rem; color:var(--ink); }
.feat{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3.4vw,56px); align-items:center; }
.feat-copy h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.9rem; }
.feat-media img{ border:1px solid var(--rule); border-radius:var(--radius); }
.blk-feat-title{ margin-bottom:.9rem; }
.cols{ display:grid; gap:clamp(20px,2.4vw,36px); }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.col{ padding:1.4rem 1.45rem; background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); min-width:0; }
.col h3{ font-size:1.2rem; margin-bottom:.5rem; }
.col p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--ink-3); }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:2px solid var(--ink); }
.stat{ padding:1.4rem 1.4rem 1.4rem 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .n{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; font-variant-numeric:tabular-nums lining-nums; color:var(--ink); }
.stat .l{ display:block; margin-top:.5rem; color:var(--ink-3); }
.sec-stat-band{ border-top:0; }
.blk-quote blockquote, .sec-quote blockquote{ margin:0; padding:0 0 0 1.4rem; border-left:4px solid var(--bleu); font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:400; line-height:1.38; color:var(--ink); max-width:36ch; }
.cite{ display:block; margin-top:.9rem; font-size:.9rem; color:var(--ink-3); }
.cta, .cta-band, .sec-cta-band{ padding:clamp(32px,4.4vw,60px) clamp(24px,4vw,54px); background:var(--white); border:1px solid var(--rule); border-radius:var(--radius-lg); text-align:center; }
.cta h2, .cta-band h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.8rem; color:var(--ink); }
.cta p, .cta-band p{ color:var(--ink-3); max-width:56ch; margin-inline:auto; }
.cta .btn-row, .cta-band .btn-row{ justify-content:center; margin-top:1.5rem; }
.blk-divider hr, hr{ border:0; border-top:1px solid var(--rule); margin:0; }
.blk-figure figcaption{ margin-top:.7rem; font-size:.9rem; color:var(--ink-3); }
.blk-notfound .lead{ margin-inline:auto; }

/* ==========================================================================
   FOOTER — night blue, the tricolore thread above it
   ========================================================================== */
.site-footer{ position:relative; background:var(--nuit); color:var(--foot-ink); padding:clamp(52px,6vw,84px) 0 clamp(28px,3vw,40px); }
.site-footer::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--bleu) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--rouge) 66.66% 100%); }
.site-footer :focus-visible{ outline-color:#9DB8EA; }
.foot-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:clamp(32px,4vw,76px); padding-bottom:clamp(8px,1vw,16px); }
.foot-brand-col{ min-width:0; }
.foot-brand{ display:inline-flex; align-items:center; gap:.7rem; color:#FFFFFF; }
.foot-brand:hover{ color:#FFFFFF; }
.foot-tag{ margin:1.3rem 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.32rem; line-height:1.34; color:#FFFFFF; }
.foot-about{ margin:.8rem 0 0; font-size:.96rem; line-height:1.62; color:var(--foot-mute); max-width:46ch; }
.foot-cols{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) minmax(0,1fr); gap:clamp(20px,2.4vw,40px); min-width:0; }
.foot-col{ min-width:0; }
.foot-h{ margin:0 0 .9rem; padding-bottom:.6rem; color:#9DB8EA; border-bottom:1px solid var(--foot-rule); font-size:.76rem; letter-spacing:.13em; }
.foot-col ul, .foot-col ol{ list-style:none; margin:0; padding:0; }
.foot-col li{ break-inside:avoid; }
.foot-col li a{ display:block; padding:.3rem 0; font-size:.95rem; line-height:1.45; color:var(--foot-ink); }
.foot-col li a span{ font-family:var(--font-mono); font-size:.76rem; color:#9DB8EA; font-variant-numeric:tabular-nums; margin-left:.25rem; white-space:nowrap; }
.foot-col li a:hover{ color:#FFFFFF; text-decoration:underline; text-decoration-color:var(--rouge); text-underline-offset:3px; }
.foot-disclosure{ margin:clamp(22px,2.4vw,32px) 0 0; padding:1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--foot-rule); font-size:.9rem; line-height:1.6; color:var(--foot-ink); max-width:100ch; }
.foot-disclosure a{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.foot-base{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(22px,2.4vw,32px); padding-top:1.2rem; border-top:1px solid var(--foot-rule); }
.foot-copy{ margin:0; font-size:.92rem; color:var(--foot-mute); font-variant-numeric:tabular-nums; }
.foot-top-link{ color:var(--foot-ink); }
.foot-top-link:hover{ color:#FFFFFF; }
.foot-note{ margin:1.1rem 0 0; font-size:.85rem; line-height:1.6; color:var(--foot-mute); max-width:104ch; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .tp-grid{ grid-template-columns:minmax(0,1fr); }
  .dash{ justify-self:start; }
  .foot-top{ grid-template-columns:minmax(0,1fr); }
  .lk-text{ display:none; }
  .codes-grid, .ct-grid, .trust-grid{ grid-template-columns:minmax(0,1fr); }
  .mk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1040px){
  .diag-grid{ grid-template-columns:minmax(0,1fr); gap:1.4rem; }
  .gd-grid{ grid-template-columns:minmax(0,1fr); }
  .gd-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px){
  .article-shell, .article-shell:has(.toc){ grid-template-columns:minmax(0,1fr); }
  .article-shell:not(:has(.toc)){ justify-items:stretch; }
  .article-main{ max-width:none; }
  .toc{ position:static; order:-1; margin-bottom:1.2rem; }
  .toc ol{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:1.6rem; }
  .article-rail{ order:-2; }
  .foot-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
  .nav{ min-height:66px; }
  .nav-toggle{ display:inline-flex; }
  .nav-search input{ display:none; }
  .nav-search{ border-color:transparent; background:transparent; }
  .nav-links{ position:absolute; left:0; right:0; top:100%; display:none; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:.4rem clamp(16px,4vw,48px) 1.1rem; background:var(--papier); border-bottom:1px solid var(--rule); }
  .site-header.is-open .nav-links{ display:flex; }
  .nav-link{ padding:.9rem 0; border-bottom:1px solid var(--rule-2); font-size:1.05rem; }
  .nav-link::after{ display:none; }
  .nav-tail{ margin-left:auto; }
  .feat, .cols-3, .cols-4, .cols-2{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .symptoms{ grid-template-columns:minmax(0,1fr); }
  .band-head-row{ grid-template-columns:minmax(0,1fr); }
  .band-more{ padding:.6rem 0 0; }
  .results-head{ flex-direction:column; gap:.4rem; }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat{ padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--rule); }
  .gd-list{ grid-template-columns:minmax(0,1fr); }
  .mk-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-list{ grid-template-columns:minmax(0,1fr); }
  .pv-levels li{ grid-template-columns:minmax(0,1fr); }
  .article-body table, .article-body thead, .article-body tbody, .article-body tr, .article-body td{ display:block; width:100%; }
  .article-body thead{ display:none; }
  .article-body tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .article-body tr:last-child{ border-bottom:0; }
  .article-body tbody tr:nth-child(even) td{ background:transparent; }
  .article-body td{ border-bottom:0; padding:.4rem .95rem; }
  .article-body td[data-label]::before{ content:attr(data-label); display:block; margin-bottom:.15rem; font-family:var(--font-label); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
}
@media (max-width:720px){
  .topline-asof{ display:none; }
  .topline-in{ min-height:30px; padding-block:.35rem; }
  .topline-what{ font-size:.66rem; letter-spacing:.08em; }
}
@media (max-width:640px){
  .lamps{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dash-panel{ border-radius:18px; }
  .shelf{ padding:12px 10px 0; gap:4px; }
  .spine{ flex:1 1 44px; min-width:40px; max-width:60px; }
  .spine a{ height:176px; padding:.55rem .2rem .5rem; }
  .spine a::before{ top:26px; } .spine a::after{ bottom:26px; }
  .sp-tome{ font-size:.55rem; letter-spacing:.04em; }
  .sp-title{ font-size:.8rem; max-height:112px; }
  .sp-n{ font-size:.58rem; }
  .entries{ columns:1; }
  .fiches{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .codes{ background-image:
    linear-gradient(90deg, transparent 22px, rgba(200,16,46,.45) 22px, rgba(200,16,46,.45) 24px, transparent 24px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(122,112,194,.22) 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(122,112,194,.34) 31px 32px),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(150,170,214,.22) 7px 8px); }
}
@media (max-width:600px){
  .mark{ width:36px; height:36px; }
  .lk-w1, .lk-w2{ font-size:1.38rem; }
  .finder-row{ flex-wrap:wrap; }
  .finder-input{ flex:1 1 100%; }
  .finder-go{ flex:1 1 100%; justify-content:center; padding:.85rem 1rem; }
  .tp-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .9rem; }
  .tp-facts span{ display:flex; flex-direction:column; gap:.2rem; padding:0; margin:0; border-right:0; font-size:.68rem; }
  .tp-facts strong{ margin:0; font-size:1.55rem; }
  .post-grid, .card-grid, .pillar-grid{ grid-template-columns:minmax(0,1fr); }
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:1.8rem; }
  .inline-cta{ flex-direction:column; align-items:stretch; }
  .topic-index-list{ columns:1; }
  .is-home .latest .post-grid > .post-card:nth-child(n+7){ display:none; }
}