:root {
  --ink: #0a0c0f;
  --ink-2: #11151a;
  --paper: #ffffff;
  --paper-soft: #f5f4f1;
  --paper-warm: #eeece7;
  --line: #dedbd3;
  --muted: #62666c;
  --gold: #c59a46;
  --gold-2: #e6c57f;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(8, 12, 17, .10);
  --site-width: 1920px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: inherit; text-decoration-thickness: .07em; text-underline-offset: .16em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f2c76f; outline-offset: 3px; }
.page-shell { width: min(var(--site-width), calc(100% - 40px)); max-width: var(--site-width); margin-inline: auto; }
.eyebrow { letter-spacing: .15em; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.eyebrow.gold, .gold { color: var(--gold-2); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 76px;
  background: rgba(5, 6, 8, .94);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(var(--site-width), calc(100% - 40px));
  min-height: 76px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}
.brand {
  color: #fff;
  font-family: var(--serif);
  font-size: 1.45rem;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -.02em;
}
.brand em { color: var(--gold-2); font-style: normal; }
.desktop-nav { display: flex; justify-content: center; gap: clamp(17px, 2.2vw, 40px); }
.desktop-nav a {
  color: #cfd2d5;
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-decoration: none;
}
.desktop-nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-search, .header-tool {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
}
.header-search { width: 42px; font-size: 1.3rem; }
.header-tool { padding: 0 20px; border-color: rgba(230,197,127,.65); color: var(--gold-2); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mobile-menu { display: none; }

/* Home hero */
.v11-hero {
  position: relative;
  min-height: 690px;
  color: #fff;
  background: #020304 url('/media/hero-code-couleur.webp') center right / cover no-repeat;
  isolation: isolate;
}
.v11-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.97) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.10) 100%), linear-gradient(0deg, rgba(0,0,0,.52), transparent 45%);
}
.v11-hero-inner { min-height: 690px; display: grid; grid-template-columns: minmax(0, 720px) 1fr; align-items: center; }
.v11-hero-copy { padding: 70px 0 56px; }
.v11-hero h1 {
  max-width: 820px;
  margin: 13px 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.55rem, 6vw, 6.8rem);
  line-height: .93;
  letter-spacing: -.055em;
}
.v11-hero h1 span { color: var(--gold-2); }
.v11-hero-lead { max-width: 650px; margin: 0 0 28px; color: #d8dade; font-size: clamp(1.03rem, 1.45vw, 1.24rem); line-height: 1.55; }
.v11-lab {
  max-width: 700px;
  padding: 18px;
  background: rgba(14,17,21,.82);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}
.v11-lab-form { display: grid; grid-template-columns: 1fr 54px 138px; gap: 10px; }
.v11-lab input[type="text"] {
  min-width: 0;
  min-height: 54px;
  padding: 0 17px;
  color: #fff;
  background: #0c1014;
  border: 1px solid #444a50;
  border-radius: 9px;
}
.v11-picker {
  position: relative;
  min-height: 54px;
  border: 1px solid #565d63;
  border-radius: 9px;
  overflow: hidden;
  background: #048b9a;
}
.v11-picker input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; }
.v11-lab button[type="submit"] {
  min-height: 54px;
  color: #111;
  background: var(--gold-2);
  border: 0;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.v11-lab-result {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.v11-result-swatch { width: 76px; height: 62px; border: 1px solid rgba(255,255,255,.32); border-radius: 9px; background: #048b9a; }
.v11-result-name { margin: 0; font-family: var(--serif); font-size: 1.55rem; line-height: 1.05; }
.v11-result-meta { margin: 5px 0 0; color: #adb4bb; font-size: .82rem; }
.v11-result-codes { display: flex; gap: 8px; }
.copy-chip {
  min-height: 42px;
  padding: 6px 11px;
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  cursor: pointer;
}
.copy-chip small { display: block; color: #939ca4; font-size: .6rem; }
.v11-examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.v11-examples button { color: #c7ccd0; background: transparent; border: 0; padding: 3px 5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .75rem; }
.v11-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.v11-stat { padding: 16px 14px; border-right: 1px solid rgba(255,255,255,.14); }
.v11-stat:first-child { padding-left: 0; }
.v11-stat:last-child { border-right: 0; }
.v11-stat strong { display: block; color: var(--gold-2); font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.v11-stat span { display: block; color: #afb4ba; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.35; }

/* Home composition */
.home-section { padding: 76px 0; }
.home-section.compact { padding: 52px 0; }
.home-section.soft { background: var(--paper-soft); border-block: 1px solid #ece9e3; }
.section-kicker { margin: 0 0 9px; color: #9a6f24; font-size: .72rem; font-weight: 820; letter-spacing: .15em; text-transform: uppercase; }
.section-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 4.3rem); line-height: 1.02; letter-spacing: -.04em; }
.section-lead { max-width: 730px; margin: 15px 0 0; color: var(--muted); font-size: 1.06rem; }
.section-heading-v11 { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.section-heading-v11 > a { color: #8b6220; font-size: .78rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; white-space: nowrap; }

.featured-v11 { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, .72fr); gap: 20px; }
.featured-v11-main { position: relative; min-height: 540px; overflow: hidden; border-radius: var(--radius); background: #566257; box-shadow: var(--shadow); }
.featured-v11-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-v11-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,24,19,.92), rgba(15,24,19,.26) 70%, rgba(15,24,19,.06)); }
.featured-v11-copy { position: relative; z-index: 2; width: min(530px, 78%); padding: 54px; color: #fff; }
.featured-v11-copy h2 { margin: 0 0 8px; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5.6rem); font-weight: 400; line-height: .94; letter-spacing: -.05em; }
.featured-v11-copy p { color: #e0e4e0; }
.featured-v11-copy .v11-codes { color: #bfc7bf; font-size: .78rem; }
.swatch-line { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 38px; margin: 26px 0; }
.swatch-line span { border: 1px solid rgba(255,255,255,.28); }
.v11-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 19px; border-radius: 8px; font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.v11-button.light { color: #172017; background: #fff; }
.v11-button.dark { color: #fff; background: #11161b; }
.v11-button.gold { color: #121212; background: var(--gold-2); }
.featured-v11-side { display: grid; grid-template-rows: 1fr 1.2fr; gap: 20px; }
.mini-panel { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.mini-panel h3 { margin: 5px 0 14px; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; line-height: 1.1; }
.mini-panel.dark { position: relative; overflow: hidden; color: #fff; background: #0a0d10; border-color: #0a0d10; }
.mini-panel.dark::after { content: ""; position: absolute; width: 150px; height: 150px; right: -40px; bottom: -40px; border-radius: 50%; background: conic-gradient(#ef4f55, #d76df2, #347be8, #47d6bb, #f1d35c, #ef4f55); filter: blur(.2px); opacity: .9; }
.mini-panel.dark > * { position: relative; z-index: 2; }
.mini-swatches { display: grid; grid-template-columns: repeat(5, 1fr); height: 46px; }
.mini-panel a { color: #996b1f; font-size: .74rem; font-weight: 850; text-decoration: none; text-transform: uppercase; letter-spacing: .07em; }

.intent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.intent-card { min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.intent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.intent-number { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: #fff; background: #10151a; border-radius: 50%; font-family: var(--serif); }
.intent-card h3 { margin: 32px 0 7px; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; }
.intent-card p { margin: 0; color: var(--muted); font-size: .92rem; }

.atlas-v11 { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 180px; gap: 14px; }
.atlas-v11-card { position: relative; overflow: hidden; border-radius: 13px; color: #fff; text-decoration: none; background: #222; }
.atlas-v11-card:nth-child(1), .atlas-v11-card:nth-child(6) { grid-column: span 4; grid-row: span 2; }
.atlas-v11-card:nth-child(2), .atlas-v11-card:nth-child(3), .atlas-v11-card:nth-child(4), .atlas-v11-card:nth-child(5) { grid-column: span 4; }
.atlas-v11-card:nth-child(7), .atlas-v11-card:nth-child(8) { grid-column: span 4; }
.atlas-v11-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.atlas-v11-card:hover img { transform: scale(1.045); }
.atlas-v11-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 62%); }
.atlas-v11-label { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 17px; }
.atlas-v11-label strong { display: block; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.atlas-v11-label small { color: #d5d8db; }

.proof-band { background: #11151a; color: #fff; }
.proof-grid { display: grid; grid-template-columns: 1.1fr repeat(4, .6fr); gap: 25px; align-items: center; padding: 38px 0; }
.proof-grid h2 { margin: 0; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.proof-grid p { margin: 5px 0 0; color: #b6bcc2; font-size: .88rem; }
.proof-item { padding-left: 24px; border-left: 1px solid #343b42; }
.proof-item strong { display: block; color: var(--gold-2); font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.proof-item span { color: #b6bcc2; font-size: .74rem; }

.lab-banner {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  color: #fff;
  background: #070a0d;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.lab-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.lab-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,10,.98), rgba(5,8,10,.72) 48%, rgba(5,8,10,.08)); }
.lab-banner-content { position: relative; z-index: 2; width: min(720px, 72%); padding: 55px; }
.lab-banner h2 { margin: 7px 0 12px; font-family: var(--serif); font-size: clamp(2.7rem, 4.5vw, 5.2rem); font-weight: 400; line-height: .95; }
.lab-banner p { color: #ced3d7; }
.lab-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 30px 0; }
.lab-tool { min-height: 92px; padding: 15px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; text-decoration: none; }
.lab-tool span { display: block; color: var(--gold-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.lab-tool strong { display: block; margin-top: 8px; font-size: .86rem; line-height: 1.25; }

.palette-v11-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.palette-v11 { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-decoration: none; }
.palette-v11 img { width: 100%; height: 150px; object-fit: cover; display: block; }
.palette-v11-copy { padding: 14px; }
.palette-v11-copy strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
.palette-v11-swatches { display: grid; grid-template-columns: repeat(5, 1fr); height: 25px; margin-top: 10px; }

.domain-feature { position: relative; min-height: 540px; overflow: hidden; border-radius: 18px; }
.domain-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.domain-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.35) 55%, rgba(0,0,0,.05)); }
.domain-copy { position: relative; z-index: 2; width: min(530px, 75%); padding: 55px; color: #fff; }
.domain-copy h2 { margin: 7px 0 14px; font-family: var(--serif); font-size: clamp(2.8rem, 4.5vw, 5rem); font-weight: 400; line-height: .96; }
.domain-copy p { color: #e1e3e4; }
.domain-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.domain-links a { padding: 9px 12px; color: #fff; background: rgba(0,0,0,.30); border: 1px solid rgba(255,255,255,.30); border-radius: 999px; font-size: .73rem; text-decoration: none; }

.editorial-v11-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.editorial-v11-card { position: relative; min-height: 335px; overflow: hidden; border-radius: 14px; color: #fff; text-decoration: none; }
.editorial-v11-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.editorial-v11-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.90), rgba(0,0,0,.04) 74%); }
.editorial-v11-copy { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 25px; }
.editorial-v11-copy h3 { margin: 5px 0; font-family: var(--serif); font-size: 1.85rem; font-weight: 400; line-height: 1.04; }
.editorial-v11-copy p { margin: 0; color: #d5d9dc; font-size: .88rem; }

.trust-v11 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; }
.trust-v11-main, .trust-v11-side { padding: 42px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.trust-v11-main h2, .trust-v11-side h2 { margin: 6px 0 12px; font-family: var(--serif); font-size: 2.4rem; font-weight: 400; line-height: 1.05; }
.trust-v11-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 25px; }
.trust-v11-list div { padding: 17px; background: var(--paper-soft); border-radius: 10px; }
.trust-v11-list strong { display: block; font-size: .9rem; }
.trust-v11-list span { color: var(--muted); font-size: .8rem; }
.trust-v11-side { color: #fff; background: #11151a; border-color: #11151a; }
.trust-v11-side p { color: #c3c8cd; }
.trust-v11-side a { color: var(--gold-2); }

.home-audit { padding: 20px 0; background: #f0eee9; border-top: 1px solid #e0ddd6; text-align: center; color: #5d6065; font-size: .8rem; }
.home-audit a { color: #684a18; font-weight: 800; }

/* Internal pages: stronger width, hierarchy and reading rhythm */
.internal-hero, .static-hero {
  position: relative;
  overflow: hidden;
  min-height: 365px;
  display: flex;
  align-items: center;
  color: #fff;
  background: radial-gradient(circle at 82% 20%, rgba(71,115,146,.28), transparent 30%), radial-gradient(circle at 68% 90%, rgba(178,90,64,.20), transparent 26%), #0a0d10;
}
.internal-hero::after, .static-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(110deg, transparent 0 68%, rgba(255,255,255,.035) 68% 69%, transparent 69%); }
.internal-hero .page-shell, .static-hero .page-shell { position: relative; z-index: 2; padding-block: 66px; }
.internal-hero h1, .static-hero h1 { max-width: 930px; margin: 10px 0 12px; font-family: var(--serif); font-size: clamp(3rem, 5.3vw, 6.2rem); font-weight: 400; line-height: .94; letter-spacing: -.05em; }
.internal-hero .lead, .static-hero p { max-width: 800px; color: #d1d5d9; font-size: 1.11rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: #9ea6ad; font-size: .73rem; }
.breadcrumbs a { color: #d8dbde; text-decoration: none; }
.internal-content { padding-top: 64px; padding-bottom: 90px; }
.knowledge-grid, .editorial-layout, .static-layout { grid-template-columns: minmax(0, 1fr) minmax(275px, 340px) !important; gap: 64px !important; }
.knowledge-main > section, .editorial-article > section, .static-layout article > section { margin-bottom: 52px; }
.knowledge-main h2, .editorial-article h2, .static-layout h2 { font-family: var(--serif); font-size: clamp(1.8rem, 2.7vw, 2.8rem); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.knowledge-main p, .editorial-article p, .static-layout p { max-width: 830px; }
.fact-box, .editorial-answer { padding: 32px !important; border: 1px solid var(--line) !important; border-left: 5px solid var(--gold) !important; border-radius: 13px !important; background: #f8f7f4 !important; }
.technical-table { width: 100%; border-collapse: separate !important; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.technical-table th, .technical-table td { padding: 14px 17px !important; border-bottom: 1px solid #ece9e3 !important; text-align: left; }
.technical-table tr:last-child th, .technical-table tr:last-child td { border-bottom: 0 !important; }
.side-card, .static-side-card, .editorial-toc, .editorial-related, .editorial-trust { border: 1px solid var(--line) !important; border-radius: 13px !important; background: #fff !important; box-shadow: 0 12px 35px rgba(10,15,20,.05); }
.color-page-swatch { min-height: 260px !important; border-radius: 14px !important; box-shadow: var(--shadow); }
.az-nav { position: sticky; top: 86px; z-index: 20; padding: 12px !important; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(10,15,20,.08); }
.az-nav a, .az-nav span { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }
.dictionary-browser { margin-top: 30px; }
.dictionary-toolbar { padding: 20px !important; border-radius: 12px 12px 0 0; background: #f4f2ed !important; }
.dictionary-toolbar input { min-height: 48px; border-radius: 8px; }
.dictionary-list { border: 1px solid var(--line); border-top: 0; }
.dictionary-row { min-height: 60px; padding: 10px 16px !important; }
.dictionary-row > span:first-child { width: 38px !important; height: 38px !important; border: 1px solid rgba(0,0,0,.18); border-radius: 8px !important; }
.tool-workspace { border-radius: 16px !important; box-shadow: var(--shadow); }
.editorial-hero { min-height: 650px !important; }
.editorial-hero-content { padding-bottom: 82px !important; }
.editorial-hero h1 { max-width: 900px; font-family: var(--serif); font-size: clamp(3.4rem, 6vw, 6.7rem) !important; line-height: .93 !important; font-weight: 400 !important; letter-spacing: -.05em; }
.editorial-hero .lead { max-width: 720px; font-size: 1.15rem; }

.v11-reference-strip { margin-top: 72px; padding: 34px; color: #fff; background: #11151a; border-radius: 15px; }
.v11-reference-strip h2 { margin: 0 0 8px; color: #fff; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; }
.v11-reference-strip p { color: #c5cacf; }
.v11-reference-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.v11-reference-links a { padding: 8px 12px; color: var(--gold-2); border: 1px solid #3a4148; border-radius: 999px; font-size: .76rem; text-decoration: none; }

.v11-deep-dive { margin: 64px 0; padding: 42px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, #f7f5f0, #fff); }
.v11-deep-dive > h2 { max-width: 820px; margin: 7px 0 25px; }
.v11-deep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.v11-deep-grid article { padding: 24px; border: 1px solid #e3dfd6; border-radius: 12px; background: #fff; }
.v11-deep-grid h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.v11-deep-grid p { margin: 0; color: #555b61; font-size: .91rem; }

.premium-color-hero { position: relative; min-height: 690px; overflow: hidden; color: #fff; background: #3f5144; }
.premium-color-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.premium-color-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,29,22,.94), rgba(18,29,22,.58) 52%, rgba(18,29,22,.08)); }
.premium-color-hero-content { position: relative; z-index: 2; width: min(750px, 72%); padding-block: 90px; }
.premium-color-hero h1 { margin: 10px 0 15px; font-family: var(--serif); font-size: clamp(4rem, 7vw, 7.4rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.premium-color-hero .lead { max-width: 680px; color: #e1e6e2; font-size: 1.14rem; }
.premium-color-code { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.premium-color-code span { padding: 9px 13px; color: #fff; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.28); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.premium-color-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 64px; padding-top: 70px; padding-bottom: 96px; }
.premium-color-layout article > section { margin-bottom: 58px; }
.premium-color-layout h2 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.1rem); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; }
.premium-color-layout h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.premium-answer { padding: 34px; border-left: 5px solid #689d71; border-radius: 13px; background: #f0f3ee; }
.premium-answer p:last-child { margin-bottom: 0; }
.premium-color-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.premium-color-table th, .premium-color-table td { padding: 13px 16px; border-bottom: 1px solid #e8e5de; text-align: left; }
.premium-color-table th { width: 34%; color: #5f6469; background: #f6f4f0; }
.premium-color-table tr:last-child th, .premium-color-table tr:last-child td { border-bottom: 0; }
.premium-palette { display: grid; grid-template-columns: repeat(5, 1fr); min-height: 130px; border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); }
.premium-palette span { display: flex; align-items: end; padding: 10px; color: #fff; font-size: .7rem; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.premium-aside { align-self: start; position: sticky; top: 96px; display: grid; gap: 16px; }
.premium-swatch { min-height: 280px; display: flex; align-items: end; padding: 24px; color: #000; background: #689d71; border: 1px solid rgba(0,0,0,.18); border-radius: 15px; box-shadow: var(--shadow); }
.premium-swatch strong { font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.premium-aside-card { padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.premium-aside-card h2 { margin: 0 0 10px; font-size: 1.45rem; }
.premium-aside-card a { display: block; margin: 8px 0; color: #74521b; }
.palette-archive-intro { max-width: 880px; margin-bottom: 42px; font-size: 1.05rem; color: var(--muted); }
.palette-archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.palette-archive-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 14px 40px rgba(10,15,20,.06); }
.palette-archive-card img { width: 100%; height: 280px; object-fit: cover; display: block; }
.palette-archive-copy { padding: 28px; }
.palette-archive-copy h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.palette-archive-copy p { color: var(--muted); }
.palette-archive-swatches { display: grid; grid-template-columns: repeat(5, 1fr); height: 42px; margin: 20px 0; }
.palette-archive-copy a { color: #7c571b; font-weight: 800; }

/* Footer */
.site-footer { color: #c1c5c9 !important; background: #090c0f !important; border-top: 1px solid #24292e; }
.footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr) !important; gap: 42px !important; padding-top: 58px !important; padding-bottom: 45px !important; }
.footer-column h2 { color: #fff !important; font-size: .75rem !important; letter-spacing: .1em; text-transform: uppercase; }
.footer-column a { color: #aeb4ba !important; }
.network-mark { display: inline-flex !important; margin-top: 18px; color: var(--gold-2) !important; text-decoration: none; }
.footer-bottom { min-height: 62px; border-top: 1px solid #252b31 !important; color: #818990 !important; }

@media (max-width: 1180px) {
  .desktop-nav { display: none; }
  .header-inner { grid-template-columns: 1fr auto; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; cursor: pointer; list-style: none; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { display: block; width: 18px; height: 2px; background: #fff; }
  .mobile-menu nav { position: absolute; top: 54px; right: 0; width: min(320px, calc(100vw - 32px)); padding: 16px; background: #11151a; border: 1px solid #333a41; border-radius: 12px; box-shadow: var(--shadow); }
  .mobile-menu nav a { display: block; padding: 12px; color: #fff; text-decoration: none; border-bottom: 1px solid #292f35; }
  .featured-v11 { grid-template-columns: 1fr; }
  .featured-v11-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .palette-v11-grid { grid-template-columns: repeat(3, 1fr); }
  .proof-grid { grid-template-columns: repeat(4, 1fr); }
  .proof-grid > div:first-child { grid-column: 1 / -1; }
  .knowledge-grid, .editorial-layout, .static-layout { gap: 38px !important; }
  .footer-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .page-shell { width: min(100% - 34px, var(--site-width)); }
  .header-inner { width: calc(100% - 28px); min-height: 66px; }
  .site-header { min-height: 66px; }
  .header-tool { display: none; }
  .v11-hero, .v11-hero-inner { min-height: auto; }
  .v11-hero { background-position: 64% center; }
  .v11-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.97), rgba(0,0,0,.73)), linear-gradient(0deg, rgba(0,0,0,.78), transparent); }
  .v11-hero-inner { display: block; }
  .v11-hero-copy { padding: 62px 0 42px; }
  .v11-hero h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .v11-lab-form { grid-template-columns: 1fr 52px; }
  .v11-lab button[type="submit"] { grid-column: 1 / -1; }
  .v11-lab-result { grid-template-columns: 62px 1fr; }
  .v11-result-swatch { width: 62px; height: 58px; }
  .v11-result-codes { grid-column: 1 / -1; }
  .v11-stats { grid-template-columns: repeat(2, 1fr); }
  .v11-stat:nth-child(2) { border-right: 0; }
  .v11-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .home-section { padding: 54px 0; }
  .section-heading-v11 { align-items: flex-start; flex-direction: column; }
  .featured-v11-main { min-height: 600px; }
  .featured-v11-copy { width: 100%; padding: 34px; }
  .featured-v11-main::after { background: linear-gradient(0deg, rgba(15,24,19,.96), rgba(15,24,19,.42) 72%, rgba(15,24,19,.1)); }
  .featured-v11-side { grid-template-columns: 1fr; }
  .intent-grid { grid-template-columns: repeat(2, 1fr); }
  .atlas-v11 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; }
  .atlas-v11-card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .atlas-v11-card:nth-child(1), .atlas-v11-card:nth-child(6) { grid-column: 1 / -1; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-banner { min-height: 650px; }
  .lab-banner::after { background: linear-gradient(0deg, rgba(5,8,10,.98), rgba(5,8,10,.76) 72%, rgba(5,8,10,.2)); }
  .lab-banner-content { width: 100%; padding: 34px; position: absolute; bottom: 0; }
  .palette-v11-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-feature { min-height: 620px; }
  .domain-feature::after { background: linear-gradient(0deg, rgba(0,0,0,.90), rgba(0,0,0,.20)); }
  .domain-copy { position: absolute; bottom: 0; width: 100%; padding: 34px; }
  .editorial-v11-grid { grid-template-columns: 1fr; }
  .editorial-v11-card { min-height: 300px; }
  .trust-v11 { grid-template-columns: 1fr; }
  .trust-v11-list { grid-template-columns: 1fr; }
  .internal-hero, .static-hero { min-height: 330px; }
  .internal-hero h1, .static-hero h1 { font-size: clamp(2.7rem, 13vw, 4.8rem); }
  .knowledge-grid, .editorial-layout, .static-layout { grid-template-columns: 1fr !important; }
  .v11-deep-grid { grid-template-columns: 1fr; }
  .premium-color-hero { min-height: 600px; }
  .premium-color-hero::after { background: linear-gradient(0deg, rgba(18,29,22,.96), rgba(18,29,22,.35)); }
  .premium-color-hero-content { width: 100%; padding-top: 220px; padding-bottom: 55px; }
  .premium-color-layout { grid-template-columns: 1fr; gap: 38px; }
  .premium-aside { position: static; grid-template-columns: 1fr 1fr; }
  .premium-swatch { min-height: 230px; }
  .editorial-hero { min-height: 560px !important; }
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 30px !important; }
}

@media (max-width: 520px) {
  body { font-size: 15.5px; }
  .brand { font-size: 1.25rem; }
  .header-search { display: none; }
  .v11-lab { padding: 12px; }
  .v11-lab-result { gap: 10px; }
  .v11-result-name { font-size: 1.28rem; }
  .copy-chip { flex: 1; }
  .intent-grid { grid-template-columns: 1fr; }
  .atlas-v11 { grid-template-columns: 1fr; }
  .atlas-v11-card:nth-child(n) { grid-column: 1; min-height: 230px; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item { padding-left: 14px; }
  .lab-tools { grid-template-columns: repeat(2, 1fr); }
  .palette-v11-grid { grid-template-columns: 1fr; }
  .palette-v11 { display: grid; grid-template-columns: 135px 1fr; }
  .palette-v11 img { height: 100%; min-height: 135px; }
  .trust-v11-main, .trust-v11-side { padding: 28px; }
  .v11-deep-dive { padding: 26px; }
  .premium-aside { grid-template-columns: 1fr; }
  .premium-palette { min-height: 210px; grid-template-columns: 1fr; }
  .palette-archive-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-intro { grid-column: auto; }
  .footer-bottom { align-items: flex-start !important; flex-direction: column; gap: 10px; padding-block: 20px; }
}

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

@media print {
  .site-header, .site-footer, .home-audit, .v11-examples { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
  .page-shell { width: 100%; }
}

/* V14 — finition éditoriale, sélecteur visuel et heroes de rubriques */
.site-header,
.header-inner { min-height: 82px; }
.brand { font-size: 1.58rem; }
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 1px;
  background: var(--gold-2);
  transition: right .25s ease;
}
.desktop-nav a:hover::after { right: 0; }

.v11-hero,
.v11-hero-inner { min-height: 940px; }
.v11-hero { background-position: 58% center; }
.v11-hero::before {
  background:
    linear-gradient(90deg, rgba(0,0,0,.99) 0%, rgba(0,0,0,.94) 37%, rgba(0,0,0,.36) 67%, rgba(0,0,0,.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,.72), transparent 42%);
}
.v11-hero-inner { grid-template-columns: minmax(0, 850px) 1fr; }
.v11-hero-copy { padding: 74px 0 58px; }
.v11-hero h1 { max-width: 850px; font-size: clamp(4.2rem, 5.7vw, 7rem); }
.v11-hero-lead { max-width: 790px; }
.v11-lab {
  max-width: 830px;
  padding: 22px;
  border-color: rgba(255,255,255,.24);
  border-radius: 20px;
  background: rgba(8,11,14,.90);
  box-shadow: 0 28px 100px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.05);
}
.v11-lab-form { grid-template-columns: minmax(0, 1fr) 148px; gap: 11px; }
.v11-lab input[type="text"] { min-height: 58px; border-color: #555c63; font-size: 1rem; }
.v11-lab button[type="submit"] { min-height: 58px; }
.v11-examples { align-items: center; margin: 10px 0 16px; }
.v11-examples > span { color: #818991; font-size: .72rem; }
.v11-examples button { padding: 2px 4px; color: #cfd3d6; }

.v14-picker-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 34px minmax(230px, 285px);
  align-items: stretch;
  gap: 16px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.v14-picker-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 9px;
}
.v14-picker-heading strong { color: #f4f4f2; font-size: .79rem; letter-spacing: .04em; }
.v14-picker-heading span { color: #7f8790; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; }
.v14-sv-plane {
  --picker-hue: 186;
  position: relative;
  min-height: 238px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, #fff 0%, hsl(var(--picker-hue) 100% 50%) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.42), 0 10px 30px rgba(0,0,0,.28);
}
.v14-sv-pointer {
  position: absolute;
  left: 97.4%;
  top: 39.6%;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #101317, 0 2px 8px rgba(0,0,0,.8);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.v14-hue-group { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 9px; }
.v14-hue-group label { color: #858d94; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; }
.v14-hue-group input {
  width: 26px;
  height: 238px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  background: transparent;
  cursor: pointer;
}
.v14-hue-group input::-webkit-slider-runnable-track {
  width: 24px;
  height: 238px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  background: linear-gradient(to top, #f00, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00);
}
.v14-hue-group input::-webkit-slider-thumb {
  width: 34px;
  height: 10px;
  margin-left: -6px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #11151a;
  box-shadow: 0 1px 5px #000;
}
.v14-hue-group input::-moz-range-track {
  width: 24px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  background: linear-gradient(to top, #f00, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00);
}
.v14-hue-group input::-moz-range-thumb {
  width: 30px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #11151a;
  box-shadow: 0 1px 5px #000;
}
.v14-picker-workspace .v11-lab-result {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 30px 0 0 7px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  border-top: 0;
}
.v14-picker-workspace .v11-result-swatch {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24);
}
.v14-picker-workspace .v11-result-name { font-size: 1.8rem; }
.v14-picker-workspace .v11-result-meta { min-height: 38px; line-height: 1.4; }
.v14-picker-workspace .v11-result-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.v14-picker-workspace .copy-chip { min-width: 0; padding-inline: 8px; text-align: left; }
.v14-picker-workspace .copy-chip span { display: block; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.v14-picker-workspace .copy-chip.is-static { grid-column: 1 / -1; }
.v14-native-picker {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px 7px 12px;
  color: #aeb5bb;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  font-size: .69rem;
  cursor: pointer;
}
.v14-native-picker input { width: 34px; height: 23px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.v11-stats { max-width: 830px; margin-top: 30px; }

.home-section { padding: 94px 0; }
.home-section.compact { padding: 66px 0; }
.featured-v11 { grid-template-columns: minmax(0, 2.25fr) minmax(320px, .72fr); gap: 24px; }
.featured-v11-main { min-height: 620px; }
.featured-v11-copy { width: min(610px, 78%); padding: 64px; }
.featured-v11-side { gap: 24px; }
.mini-panel { padding: 36px; }
.intent-card { min-height: 240px; padding: 32px; }
.atlas-v11 { grid-auto-rows: 220px; gap: 18px; }
.atlas-v11-card,
.palette-v11,
.editorial-v11-card { box-shadow: 0 16px 38px rgba(8,12,17,.08); }
.atlas-v11-card::before,
.editorial-v11-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: inherit;
  pointer-events: none;
}
.atlas-v11-label { z-index: 3; left: 25px; bottom: 22px; }
.atlas-v11-label strong { font-size: 1.68rem; }
.proof-grid { padding-block: 46px; }
.lab-banner { min-height: 610px; }
.lab-banner-content { width: min(800px, 70%); padding: 68px; }
.palette-v11 img { height: 185px; }
.domain-feature { min-height: 640px; box-shadow: var(--shadow); }
.domain-copy { width: min(610px, 74%); padding: 68px; }
.editorial-v11-card { min-height: 390px; }
.editorial-v11-copy { left: 34px; right: 34px; bottom: 31px; z-index: 3; }
.trust-v11-main,
.trust-v11-side { padding: 50px; box-shadow: 0 16px 44px rgba(8,12,17,.06); }

.v14-rubric-hero {
  --hub-image: url('/media/hero-code-couleur.webp');
  --hub-position: center;
  --hub-accent: #e6c57f;
  position: relative;
  min-height: 590px !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #07090c var(--hub-image) var(--hub-position) / cover no-repeat !important;
  isolation: isolate;
}
.v14-rubric-hero > img,
.v14-rubric-hero > .editorial-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hub-position);
  opacity: .96;
  filter: saturate(1.07) contrast(1.04);
  transform: scale(1.002);
}
.v14-rubric-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3,5,7,.97) 0%, rgba(3,5,7,.80) 43%, rgba(3,5,7,.28) 74%, rgba(3,5,7,.12) 100%),
    linear-gradient(0deg, rgba(3,5,7,.82) 0%, transparent 58%);
}
.v14-rubric-hero::after,
.v14-rubric-hero .editorial-hero-shade,
.v14-rubric-hero .internal-hero-shade {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 83% 18%, color-mix(in srgb, var(--hub-accent) 24%, transparent), transparent 28%),
    linear-gradient(120deg, transparent 0 68%, rgba(255,255,255,.055) 68.1% 68.3%, transparent 68.4%);
}
.v14-rubric-hero > .page-shell,
.v14-rubric-hero > .editorial-hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--site-width), calc(100% - 40px));
  padding-top: 110px !important;
  padding-bottom: 86px !important;
}
.v14-rubric-hero > .page-shell::after,
.v14-rubric-hero > .editorial-hero-content::after {
  content: "";
  display: block;
  width: min(360px, 42vw);
  height: 3px;
  margin-top: 34px;
  background: linear-gradient(90deg, var(--hub-accent), transparent);
}
.v14-rubric-hero h1 {
  max-width: 1050px !important;
  margin: 14px 0 18px !important;
  color: #fff;
  font-family: var(--serif) !important;
  font-size: clamp(4.1rem, 6.4vw, 7.6rem) !important;
  font-weight: 400 !important;
  line-height: .9 !important;
  letter-spacing: -.058em !important;
  text-wrap: balance;
}
.v14-rubric-hero .lead,
.v14-rubric-hero > .page-shell > p:last-child {
  max-width: 800px;
  margin-bottom: 0;
  color: #e2e4e6 !important;
  font-size: clamp(1.03rem, 1.25vw, 1.22rem) !important;
  line-height: 1.55;
}
.v14-rubric-hero .breadcrumbs { color: #c2c7cc; }
.v14-rubric-hero .breadcrumbs a { color: #fff; }
.method-hero.v14-rubric-hero { min-height: 545px !important; }
.editorial-hero.v14-rubric-hero { min-height: 690px !important; }

@media (max-width: 1050px) {
  .v14-picker-workspace { grid-template-columns: minmax(300px, 1fr) 34px 230px; }
  .v14-picker-workspace .v11-result-name { font-size: 1.55rem; }
}

@media (max-width: 820px) {
  .site-header,
  .header-inner { min-height: 66px; }
  .v11-hero,
  .v11-hero-inner { min-height: auto; }
  .v11-hero-copy { padding: 64px 0 48px; }
  .v11-hero h1 { font-size: clamp(3.3rem, 13vw, 5.4rem); }
  .v11-lab-form { grid-template-columns: 1fr 132px; }
  .v11-lab button[type="submit"] { grid-column: auto; }
  .v14-picker-workspace { grid-template-columns: minmax(0, 1fr) 32px; }
  .v14-picker-workspace .v11-lab-result { grid-column: 1 / -1; display: grid; grid-template-columns: 76px 1fr; padding: 4px 0 0; }
  .v14-picker-workspace .v11-result-codes,
  .v14-native-picker { grid-column: 1 / -1; }
  .v14-sv-plane { min-height: 250px; }
  .v14-hue-group input,
  .v14-hue-group input::-webkit-slider-runnable-track { height: 250px; }
  .home-section { padding: 64px 0; }
  .featured-v11-main { min-height: 640px; }
  .lab-banner { min-height: 680px; }
  .v14-rubric-hero,
  .method-hero.v14-rubric-hero,
  .editorial-hero.v14-rubric-hero { min-height: 560px !important; align-items: flex-end; }
  .v14-rubric-hero::before { background: linear-gradient(0deg, rgba(3,5,7,.96), rgba(3,5,7,.38) 80%, rgba(3,5,7,.16)); }
  .v14-rubric-hero > .page-shell,
  .v14-rubric-hero > .editorial-hero-content { width: min(100% - 34px, var(--site-width)); padding-top: 190px !important; padding-bottom: 48px !important; }
  .v14-rubric-hero h1 { font-size: clamp(3rem, 13vw, 5.4rem) !important; }
}

@media (max-width: 520px) {
  .v11-lab-form { grid-template-columns: 1fr; }
  .v11-lab button[type="submit"] { grid-column: 1; }
  .v14-picker-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  .v14-sv-plane { min-height: 218px; }
  .v14-hue-group input,
  .v14-hue-group input::-webkit-slider-runnable-track { height: 218px; }
  .v14-picker-workspace .v11-lab-result { display: flex; }
  .v14-picker-workspace .v11-result-codes { width: 100%; }
  .v14-picker-workspace .v11-result-swatch { height: 62px; }
  .v14-rubric-hero h1 { font-size: clamp(2.8rem, 15vw, 4.6rem) !important; }
}

@media print {
  .v14-picker-workspace { display: none !important; }
}

/* V15 — sélection guidée dans le hero */
.v11-hero,
.v11-hero-inner { min-height: 1260px; }
.v11-lab { max-width: 940px; }
.v11-stats { max-width: 940px; }
.v15-palette-picker {
  margin-top: 18px;
  padding-top: 19px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.v15-palette-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 15px;
}
.v15-palette-heading .eyebrow { margin: 0 0 3px; font-size: .61rem; }
.v15-palette-heading h3 {
  margin: 0;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -.025em;
}
.v15-palette-heading > p { max-width: 320px; margin: 0; color: #929aa2; font-size: .73rem; line-height: 1.45; text-align: right; }
.v15-palette-groups { display: grid; grid-template-columns: 1fr 1.3fr 1.45fr; gap: 10px; }
.v15-palette-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
}
.v15-palette-group > strong { display: block; margin-bottom: 8px; color: #9199a1; font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.v15-palette-group > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; }
.v15-palette-group button {
  position: relative;
  min-width: 0;
  height: 40px;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 7px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.v15-palette-group button:hover,
.v15-palette-group button:focus-visible,
.v15-palette-group button.is-selected { z-index: 3; transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,.5), 0 0 0 2px #fff; }
.v15-palette-group button span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 8;
  width: max-content;
  max-width: 130px;
  padding: 5px 8px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  background: #0b0e12;
  font-size: .62rem;
  line-height: 1.15;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity .15s ease, transform .15s ease;
}
.v15-palette-group button:hover span,
.v15-palette-group button:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.v15-live-harmony {
  display: grid;
  grid-template-columns: 142px 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  background: rgba(0,0,0,.28);
}
.v15-live-harmony > div:first-child strong,
.v15-live-harmony > div:first-child span { display: block; }
.v15-live-harmony > div:first-child strong { color: #f4f4f2; font-size: .7rem; }
.v15-live-harmony > div:first-child span { color: #747d86; font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.v15-harmony-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.v15-harmony-swatches button {
  display: grid;
  min-width: 0;
  padding: 0;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  color: #e9ebed;
  border: 0;
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  text-align: left;
  cursor: pointer;
}
.v15-harmony-swatches button:hover { background: rgba(255,255,255,.1); }
.v15-harmony-swatches i { display: block; width: 38px; height: 38px; grid-row: 1 / 3; border-radius: 7px 0 0 7px; background: #048b9a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.v15-harmony-swatches span { align-self: end; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.v15-harmony-swatches small { align-self: start; color: #7f8790; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .57rem; }

/* Tous les héros d’index ont exactement la même hauteur à chaque breakpoint. */
.v14-rubric-hero,
.method-hero.v14-rubric-hero,
.editorial-hero.v14-rubric-hero {
  height: 640px !important;
  min-height: 640px !important;
  max-height: 640px !important;
}

@media (max-width: 1050px) {
  .v11-hero,
  .v11-hero-inner { min-height: 1340px; }
  .v15-palette-groups { grid-template-columns: 1fr 1fr; }
  .v15-palette-group:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .v11-hero,
  .v11-hero-inner { min-height: auto; }
  .v15-palette-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .v15-palette-heading > p { text-align: left; }
  .v15-palette-groups { grid-template-columns: 1fr; }
  .v15-palette-group:last-child { grid-column: auto; }
  .v15-live-harmony { grid-template-columns: 1fr; }
  .v14-rubric-hero,
  .method-hero.v14-rubric-hero,
  .editorial-hero.v14-rubric-hero {
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;
  }
}

@media (max-width: 520px) {
  .v15-palette-group > div { grid-template-columns: repeat(6, 1fr); }
  .v15-harmony-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v15-harmony-swatches button { display: block; background: transparent; }
  .v15-harmony-swatches i { width: 100%; height: 36px; border-radius: 6px; }
  .v15-harmony-swatches span { display: block; margin-top: 4px; font-size: .54rem; }
  .v15-harmony-swatches small { display: none; }
  .v14-rubric-hero,
  .method-hero.v14-rubric-hero,
  .editorial-hero.v14-rubric-hero {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
  }
  .v14-rubric-hero > .page-shell,
  .v14-rubric-hero > .editorial-hero-content { padding-top: 110px !important; padding-bottom: 34px !important; }
}

@media print {
  .v15-palette-picker { display: none !important; }
}

/* V15 — fiches couleur de référence */
.v15-color-page { background: #fff; }
.v15-color-page main { overflow: hidden; }
.v15-color-page [id] { scroll-margin-top: 150px; }
.v15-color-hero {
  position: relative;
  height: 730px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 76% 40%, color-mix(in srgb, var(--color) 88%, white 12%) 0 10%, transparent 32%),
    radial-gradient(circle at 96% 84%, color-mix(in srgb, var(--color-complement) 52%, transparent) 0, transparent 33%),
    linear-gradient(118deg, #07090c 0 48%, color-mix(in srgb, var(--color-deep) 74%, #07090c) 77%, #07090c 100%);
  isolation: isolate;
}
.v15-color-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(117deg, transparent 0 70px, rgba(255,255,255,.025) 71px, transparent 72px 142px),
    linear-gradient(90deg, rgba(4,6,8,.98) 0, rgba(4,6,8,.90) 43%, rgba(4,6,8,.15) 76%, rgba(4,6,8,.55));
}
.v15-color-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color) 70%, white), transparent);
}
.v15-color-hero-inner {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(520px, .94fr);
  align-items: center;
  gap: clamp(40px, 7vw, 140px);
  padding-block: 62px;
}
.v15-color-hero-copy { max-width: 900px; }
.v15-color-hero .breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; color: #bfc5ca; font-size: .72rem; }
.v15-color-hero .breadcrumbs span { display: flex; gap: 10px; }
.v15-color-hero .breadcrumbs a { color: #fff; }
.v15-color-hero .eyebrow { margin: 0 0 9px; color: color-mix(in srgb, var(--color-soft) 70%, white); }
.v15-color-hero h1 {
  max-width: 920px;
  margin: 0 0 23px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(5.2rem, 8vw, 9.4rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.072em;
  text-wrap: balance;
}
.v15-color-definition { max-width: 780px; margin: 0 0 28px; color: #d9dde0; font-size: clamp(1.02rem, 1.25vw, 1.22rem); line-height: 1.58; }
.v15-hero-codes { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 27px; }
.v15-hero-codes span { min-width: 126px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); }
.v15-hero-codes small,
.v15-hero-codes strong { display: block; }
.v15-hero-codes small { color: #9099a2; font-size: .56rem; font-weight: 700; letter-spacing: .12em; }
.v15-hero-codes strong { overflow: hidden; color: #fff; font-size: .77rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.v15-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.v15-hero-actions .button { min-width: 180px; padding: 13px 18px; border-radius: 5px; font-size: .7rem; font-weight: 800; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.v15-hero-actions .gold-button { color: #111; background: var(--gold-2); }
.v15-hero-actions .ghost-button { color: #fff; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.045); }
.v15-color-portrait {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1.06;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(145deg, var(--color-soft), var(--color) 42%, var(--color-deep) 82%);
  box-shadow: 0 45px 130px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.25);
}
.v15-color-portrait::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  transform: rotate(-18deg) scaleX(.85);
}
.v15-color-portrait::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -9%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-complement);
  filter: blur(1px);
  opacity: .92;
  box-shadow: 0 0 80px color-mix(in srgb, var(--color-complement) 45%, transparent);
}
.v15-portrait-orbit { position: absolute; inset: 0; }
.v15-portrait-orbit span,
.v15-portrait-orbit i { position: absolute; border-radius: 50%; }
.v15-portrait-orbit span { top: 13%; right: 12%; width: 33%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 24px rgba(0,0,0,.08); }
.v15-portrait-orbit i { left: 10%; bottom: 17%; width: 46%; aspect-ratio: 1; background: color-mix(in srgb, var(--color) 70%, black); box-shadow: inset 30px 20px 70px rgba(255,255,255,.12), 0 20px 60px rgba(0,0,0,.25); }
.v15-portrait-main { position: absolute; left: 9%; top: 10%; z-index: 3; display: flex; flex-direction: column; }
.v15-portrait-main small { color: color-mix(in srgb, var(--color-text) 65%, transparent); font-size: .62rem; font-weight: 800; letter-spacing: .13em; }
.v15-portrait-main strong { color: var(--color-text); font-family: var(--serif); font-size: clamp(3rem, 4vw, 5.6rem); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
.v15-portrait-main span { color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: .72rem; }
.v15-portrait-scale { position: absolute; right: 6%; bottom: 7%; z-index: 4; display: grid; width: 62%; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: 0 12px 38px rgba(0,0,0,.25); }
.v15-portrait-scale i { height: 42px; }

.v15-color-toc { position: sticky; top: 82px; z-index: 45; overflow-x: auto; border-bottom: 1px solid #dedbd4; background: rgba(255,255,255,.95); backdrop-filter: blur(14px); }
.v15-color-toc .page-shell { display: flex; min-width: max-content; justify-content: center; }
.v15-color-toc a { padding: 17px clamp(12px, 1.5vw, 26px); color: #42464b; border-right: 1px solid #ece9e3; font-size: .69rem; font-weight: 750; text-decoration: none; text-transform: uppercase; letter-spacing: .07em; }
.v15-color-toc a:first-child { border-left: 1px solid #ece9e3; }
.v15-color-toc a:hover { color: #000; background: #f5f3ef; }

.v15-color-content { width: min(1560px, calc(100% - 40px)); }
.v15-answer-card {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .55fr);
  gap: 50px;
  margin: 76px 0 10px;
  padding: clamp(32px, 4vw, 68px);
  border: 1px solid #ddd9d1;
  border-radius: 20px;
  background: #f7f6f3;
  box-shadow: 0 28px 80px rgba(10,14,18,.065);
}
.v15-answer-card .status-badge { display: inline-flex; margin-bottom: 22px; padding: 6px 10px; color: #245b3b; border: 1px solid #cde6d6; border-radius: 999px; background: #edf8f1; font-size: .68rem; font-weight: 750; }
.v15-answer-card h2,
.v15-section h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 4.2vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.052em; text-wrap: balance; }
.v15-answer-card > div:first-child > p:not(.eyebrow) { max-width: 960px; color: #3e4246; font-size: 1.03rem; line-height: 1.72; }
.v15-answer-swatch { display: flex; min-height: 280px; padding: 30px; flex-direction: column; justify-content: flex-end; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 18px 42px rgba(0,0,0,.12); }
.v15-answer-swatch small { opacity: .66; font-size: .61rem; font-weight: 800; letter-spacing: .13em; }
.v15-answer-swatch strong { font-family: var(--serif); font-size: 2.1rem; font-weight: 400; }
.v15-answer-swatch span { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; opacity: .82; }

.v15-section { padding: 105px 0; border-bottom: 1px solid #dfdcd6; }
.v15-section:last-child { border-bottom: 0; }
.v15-section-heading { max-width: 1050px; margin-bottom: 44px; }
.v15-section-heading.split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .55fr); align-items: end; gap: clamp(40px, 7vw, 120px); }
.v15-section-heading .eyebrow,
.v15-answer-card .eyebrow,
.v15-origin .eyebrow,
.v15-sources .eyebrow,
.v15-preserved-dossier > .eyebrow { margin: 0 0 9px; color: #9a6c19; }
.v15-section-heading > p:last-child,
.v15-section-heading.split > p { margin: 14px 0 0; color: #606469; font-size: .96rem; line-height: 1.68; }
.v15-section-heading.split > p { margin: 0; }

.v15-keypoint-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v15-keypoint-grid article { min-height: 245px; padding: 30px; border-top: 3px solid var(--color); background: #f4f2ee; }
.v15-keypoint-grid small,
.v15-use-grid small { color: #8b621b; font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.v15-keypoint-grid h3 { margin: 30px 0 10px; font-family: var(--serif); font-size: 1.55rem; font-weight: 400; line-height: 1.1; }
.v15-keypoint-grid p { margin: 0; color: #565b60; font-size: .84rem; line-height: 1.6; }

.v15-conversion-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.v15-conversion-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 164px;
  padding: 22px;
  flex-direction: column;
  align-items: flex-start;
  color: #16191c;
  border: 1px solid #ddd9d2;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.v15-conversion-card:hover { border-color: var(--color); box-shadow: 0 15px 38px rgba(8,12,17,.08); transform: translateY(-2px); }
.v15-conversion-card small { color: #777c81; font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.v15-conversion-card code { display: block; width: 100%; margin: 18px 0 7px; overflow: hidden; color: #101316; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(.78rem, 1vw, 1rem); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.v15-conversion-card > span { color: #777c81; font-size: .68rem; }
.v15-conversion-card em { position: absolute; right: 14px; bottom: 12px; color: #9b7027; font-size: .58rem; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.v15-conversion-card.is-copied { border-color: #377b52; background: #f2faf5; }
.v15-method-note { margin: 24px 0 0; padding: 20px 22px; color: #565b60; border-left: 3px solid var(--color); background: #f6f4f0; font-size: .84rem; line-height: 1.65; }

.v15-tone-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 7px; }
.v15-tone-grid button { min-width: 0; padding: 0 0 12px; overflow: hidden; border: 1px solid #ddd9d2; border-radius: 9px; background: #fff; text-align: left; cursor: pointer; }
.v15-tone-grid i { display: block; height: 150px; margin-bottom: 12px; background: var(--tone); box-shadow: inset 0 0 0 1px rgba(0,0,0,.055); }
.v15-tone-grid span,
.v15-tone-grid code { display: block; padding-inline: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v15-tone-grid span { font-size: .68rem; font-weight: 750; }
.v15-tone-grid code { color: #777c81; font-size: .61rem; }

.v15-perception-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); gap: 70px; padding: clamp(30px, 4vw, 64px); color: #fff; border-radius: 18px; background: #101419; }
.v15-meters { display: grid; gap: 24px; }
.v15-meters > div { display: grid; grid-template-columns: 165px 1fr 72px; align-items: center; gap: 18px; }
.v15-meters span { color: #c1c7cc; font-size: .72rem; }
.v15-meters strong { color: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; text-align: right; }
.v15-meters meter { width: 100%; height: 12px; border: 0; border-radius: 20px; background: #252b31; }
.v15-meters meter::-webkit-meter-bar { border: 0; border-radius: 20px; background: #252b31; }
.v15-meters meter::-webkit-meter-optimum-value { border-radius: 20px; background: linear-gradient(90deg, var(--color-deep), var(--color), var(--color-soft)); }
.v15-meters meter::-moz-meter-bar { border-radius: 20px; background: linear-gradient(90deg, var(--color-deep), var(--color), var(--color-soft)); }
.v15-perception-grid article { padding-left: 42px; border-left: 1px solid #343b42; }
.v15-perception-grid h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.1; }
.v15-perception-grid p { color: #bbc1c6; font-size: .85rem; line-height: 1.72; }

.v15-origin { position: relative; display: grid; grid-template-columns: minmax(240px, .46fr) minmax(0, 1.2fr); gap: clamp(50px, 8vw, 140px); align-items: center; }
.v15-origin-mark { display: grid; aspect-ratio: 1; place-items: center; color: var(--color-text); border-radius: 50%; background: var(--color); font-family: var(--serif); font-size: clamp(7rem, 13vw, 14rem); line-height: 1; box-shadow: inset 30px 20px 90px rgba(255,255,255,.14), 0 30px 80px color-mix(in srgb, var(--color) 22%, transparent); }
.v15-origin > div:last-child > p:not(.eyebrow) { max-width: 900px; color: #42474c; font-size: 1.06rem; line-height: 1.8; }
.v15-material-note { margin-top: 28px; padding: 25px 28px; border-left: 3px solid var(--color); background: #f4f1ec; }
.v15-material-note h3 { margin: 5px 0 8px; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; }
.v15-material-note p:last-child { margin-bottom: 0 !important; font-size: .86rem !important; }

.v15-context-grid,
.v15-use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v15-context-grid article { position: relative; min-height: 380px; padding: 36px; overflow: hidden; color: #fff; background: #11151a; }
.v15-context-grid article:nth-child(2) { background: color-mix(in srgb, var(--color-deep) 72%, #11151a); }
.v15-context-grid article:nth-child(3) { color: #111; border: 1px solid #d9d5cd; background: #f2f0ec; }
.v15-context-grid article > span { display: block; margin-bottom: 70px; color: color-mix(in srgb, var(--color-soft) 65%, white); font-family: var(--serif); font-size: 2rem; }
.v15-context-grid article:nth-child(3) > span { color: #936a23; }
.v15-context-grid h3 { margin: 0 0 16px; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.05; }
.v15-context-grid p { margin: 0; color: #c3c8cc; font-size: .86rem; line-height: 1.75; }
.v15-context-grid article:nth-child(3) p { color: #555a5f; }
.v15-use-grid { grid-template-columns: repeat(4, 1fr); }
.v15-use-grid article { min-height: 340px; padding: 32px; border: 1px solid #dedad3; background: #fff; }
.v15-use-grid h3 { margin: 75px 0 14px; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1.08; }
.v15-use-grid p { color: #555a5f; font-size: .84rem; line-height: 1.7; }

.v15-harmony-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.v15-harmony-grid button { min-width: 0; padding: 0; overflow: hidden; border: 1px solid #dcd8d1; border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.v15-harmony-grid i { display: block; height: 230px; background: var(--harmony); }
.v15-harmony-grid > button > span { display: grid; padding: 15px; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; }
.v15-harmony-grid small { grid-row: 1 / 3; color: #a06f1d; font-family: var(--serif); font-size: 1.1rem; }
.v15-harmony-grid strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.v15-harmony-grid code { color: #73787d; font-size: .63rem; }
.v15-proportion { display: flex; height: 26px; margin-top: 16px; overflow: hidden; border-radius: 5px; }
.v15-proportion span { width: var(--weight); }

.v15-contrast-grid { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; }
.v15-contrast-grid article { display: flex; min-height: 320px; padding: 32px; flex-direction: column; justify-content: flex-end; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.v15-contrast-grid article small { font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.v15-contrast-grid article strong { font-family: var(--serif); font-size: 4.2rem; font-weight: 400; line-height: 1; }
.v15-contrast-grid article span { font-size: .72rem; font-weight: 700; }
.v15-contrast-grid article p { margin: 55px 0 0; font-family: var(--serif); font-size: 1.5rem; }
.v15-contrast-grid > div { padding: 38px; border: 1px solid #dedad3; border-radius: 12px; background: #f4f2ee; }
.v15-contrast-grid h3 { margin: 0 0 18px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.v15-contrast-grid > div p { color: #4f5459; font-size: .9rem; line-height: 1.75; }
.v15-contrast-grid > div a { color: #855b13; font-size: .78rem; font-weight: 750; }

.v15-nearby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.v15-nearby-grid a { display: grid; min-width: 0; grid-template-columns: 84px 1fr; overflow: hidden; color: #16191c; border: 1px solid #dedad3; border-radius: 8px; background: #fff; text-decoration: none; }
.v15-nearby-grid i { display: block; min-height: 90px; background: var(--near); }
.v15-nearby-grid span { display: grid; min-width: 0; padding: 15px; grid-template-columns: 1fr auto; align-content: center; }
.v15-nearby-grid strong { overflow: hidden; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.v15-nearby-grid code { color: #70757a; font-size: .62rem; }
.v15-nearby-grid small { grid-column: 1 / -1; color: #956819; font-size: .6rem; font-weight: 750; }

.v15-preserved-dossier { padding: 105px 0; border-bottom: 1px solid #dfdcd6; }
.v15-preserved-dossier .v11-deep-dive { padding: clamp(35px, 5vw, 70px); border: 0; border-radius: 18px; background: #f4f2ee; }
.v15-preserved-dossier .v11-deep-dive > .eyebrow { display: none; }
.v15-preserved-dossier .v11-deep-dive h2 { max-width: 900px; }
.v15-preserved-dossier .v11-deep-grid { margin-top: 38px; }

.v15-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v15-faq details { border: 1px solid #ddd9d2; border-radius: 9px; background: #fff; }
.v15-faq summary { position: relative; padding: 24px 58px 24px 24px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; cursor: pointer; list-style: none; }
.v15-faq summary::-webkit-details-marker { display: none; }
.v15-faq summary::after { content: "+"; position: absolute; top: 19px; right: 22px; color: #9b7027; font-family: var(--sans); font-size: 1.5rem; }
.v15-faq details[open] summary::after { content: "−"; }
.v15-faq p { margin: 0; padding: 0 24px 26px; color: #555a5f; font-size: .87rem; line-height: 1.72; }

.v15-sources { display: grid; grid-template-columns: minmax(300px, .65fr) minmax(0, 1.35fr); gap: clamp(50px, 8vw, 140px); margin-bottom: 90px; padding: clamp(38px, 5vw, 72px); color: #fff; border: 0; border-radius: 20px; background: #0f1419; }
.v15-sources > div:first-child p:last-child { color: #b8bec3; font-size: .91rem; line-height: 1.75; }
.v15-sources h2 { font-size: clamp(2.7rem, 4vw, 4.8rem); }
.v15-source-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.v15-source-columns > div { padding-left: 24px; border-left: 1px solid #353c43; }
.v15-source-columns h3 { margin: 0 0 20px; color: #e6c57f; font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; }
.v15-source-columns ul { margin: 0; padding: 0; list-style: none; }
.v15-source-columns li { margin: 0 0 11px; }
.v15-source-columns a { color: #e2e5e8; font-size: .76rem; }
.v15-source-columns p { color: #c0c5ca; font-size: .76rem; line-height: 1.75; }

@media (max-width: 1180px) {
  .v15-color-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(380px, .65fr); gap: 45px; }
  .v15-color-hero h1 { font-size: clamp(5rem, 8vw, 7.4rem); }
  .v15-conversion-grid { grid-template-columns: repeat(3, 1fr); }
  .v15-keypoint-grid,
  .v15-use-grid { grid-template-columns: 1fr 1fr; }
  .v15-tone-grid { grid-template-columns: repeat(5, 1fr); }
  .v15-context-grid { grid-template-columns: 1fr; }
  .v15-context-grid article { min-height: auto; }
  .v15-context-grid article > span { margin-bottom: 35px; }
  .v15-nearby-grid { grid-template-columns: 1fr 1fr; }
  .v15-sources { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .v15-color-hero { height: auto; min-height: 920px; }
  .v15-color-hero-inner { grid-template-columns: 1fr; align-content: center; padding-block: 70px; }
  .v15-color-hero-copy { max-width: 760px; }
  .v15-color-portrait { width: min(100%, 620px); aspect-ratio: 1.6; justify-self: start; }
  .v15-portrait-orbit i { width: 31%; }
  .v15-color-toc { top: 66px; }
  .v15-answer-card { grid-template-columns: 1fr; }
  .v15-answer-swatch { min-height: 220px; }
  .v15-section-heading.split { grid-template-columns: 1fr; gap: 12px; }
  .v15-conversion-grid { grid-template-columns: 1fr 1fr; }
  .v15-perception-grid { grid-template-columns: 1fr; }
  .v15-perception-grid article { padding: 34px 0 0; border-top: 1px solid #343b42; border-left: 0; }
  .v15-origin { grid-template-columns: 230px 1fr; gap: 45px; }
  .v15-harmony-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v15-harmony-grid i { height: 160px; }
  .v15-harmony-grid > button > span { display: block; }
  .v15-harmony-grid small { display: none; }
  .v15-harmony-grid strong,
  .v15-harmony-grid code { display: block; }
  .v15-contrast-grid { grid-template-columns: 1fr 1fr; }
  .v15-contrast-grid > div { grid-column: 1 / -1; }
  .v15-source-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .v15-color-page [id] { scroll-margin-top: 120px; }
  .v15-color-hero { min-height: 840px; }
  .v15-color-hero-inner { gap: 28px; padding-block: 46px; }
  .v15-color-hero .breadcrumbs { margin-bottom: 24px; }
  .v15-color-hero h1 { font-size: clamp(4.2rem, 21vw, 6.2rem); }
  .v15-color-definition { font-size: .94rem; }
  .v15-hero-codes span { min-width: calc(50% - 5px); }
  .v15-hero-actions .button { width: 100%; }
  .v15-color-portrait { aspect-ratio: 1.3; border-radius: 20px; }
  .v15-portrait-main strong { font-size: 3rem; }
  .v15-color-toc .page-shell { justify-content: flex-start; }
  .v15-color-content { width: min(100% - 28px, 1560px); }
  .v15-answer-card { margin-top: 38px; padding: 25px; }
  .v15-answer-card h2,
  .v15-section h2 { font-size: clamp(2.35rem, 13vw, 3.7rem); }
  .v15-section { padding: 72px 0; }
  .v15-keypoint-grid,
  .v15-use-grid,
  .v15-conversion-grid,
  .v15-faq,
  .v15-nearby-grid { grid-template-columns: 1fr; }
  .v15-keypoint-grid article,
  .v15-use-grid article { min-height: auto; }
  .v15-keypoint-grid h3,
  .v15-use-grid h3 { margin-top: 28px; }
  .v15-conversion-card { min-height: 145px; }
  .v15-tone-grid { grid-template-columns: repeat(3, 1fr); }
  .v15-tone-grid i { height: 110px; }
  .v15-perception-grid { padding: 25px; }
  .v15-meters > div { grid-template-columns: 1fr 58px; gap: 8px; }
  .v15-meters meter { grid-column: 1 / -1; grid-row: 2; }
  .v15-meters strong { grid-column: 2; grid-row: 1; }
  .v15-origin { grid-template-columns: 1fr; }
  .v15-origin-mark { width: 210px; }
  .v15-context-grid article { padding: 27px; }
  .v15-harmony-grid { grid-template-columns: 1fr 1fr; }
  .v15-harmony-grid button:nth-child(3) { grid-column: 1 / -1; }
  .v15-harmony-grid i { height: 130px; }
  .v15-contrast-grid { grid-template-columns: 1fr; }
  .v15-contrast-grid > div { grid-column: auto; }
  .v15-sources { margin-bottom: 45px; padding: 28px; }
}

@media print {
  .v15-color-hero { height: auto; min-height: 0; color: #000; background: #fff; }
  .v15-color-hero-inner { display: block; padding: 30px 0; }
  .v15-color-hero h1,
  .v15-color-hero .breadcrumbs a,
  .v15-color-hero .eyebrow { color: #000; }
  .v15-color-definition { color: #222; }
  .v15-color-portrait,
  .v15-color-toc,
  .v15-hero-actions,
  .v15-conversion-card em { display: none !important; }
  .v15-section { break-inside: avoid; padding: 34px 0; }
}

/* V16 — home asymétrique et héros photographiques des 63 couleurs */
@media (min-width: 1281px) {
  .v11-hero,
  .v11-hero-inner { min-height: 1040px; }
  .v11-hero {
    background-position: center center;
  }
  .v11-hero::before {
    background:
      linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,.54) 68%, rgba(0,0,0,.28) 100%),
      linear-gradient(0deg, rgba(0,0,0,.82), transparent 58%);
  }
  .v11-hero-inner { display: block; }
  .v11-hero-copy {
    display: grid;
    min-height: 1040px;
    padding: 76px 0 64px;
    grid-template-columns: minmax(430px, .72fr) minmax(720px, 1.28fr);
    grid-template-rows: auto auto auto auto;
    align-content: center;
    column-gap: clamp(48px, 5vw, 108px);
  }
  .v11-hero-copy > .eyebrow { grid-column: 1; grid-row: 1; align-self: end; }
  .v11-hero-copy > h1 { grid-column: 1; grid-row: 2; max-width: 660px; font-size: clamp(5rem, 5.3vw, 7.6rem); }
  .v11-hero-copy > .v11-hero-lead { grid-column: 1; grid-row: 3; max-width: 620px; }
  .v11-hero-copy > .v11-stats { grid-column: 1; grid-row: 4; max-width: 650px; align-self: start; }
  .v11-hero-copy > .v11-lab {
    width: 100%;
    max-width: 960px;
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    justify-self: end;
    padding: clamp(20px, 1.7vw, 30px);
    border-color: rgba(230,197,127,.30);
    background: rgba(7,10,13,.92);
    box-shadow: 0 42px 140px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.07);
  }
}

.v15-color-hero {
  height: 780px;
  background: #07090c;
}
.v15-color-hero::before {
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,5,7,.97) 0%, rgba(3,5,7,.88) 40%, rgba(3,5,7,.18) 72%, rgba(3,5,7,.30) 100%),
    linear-gradient(0deg, rgba(3,5,7,.62), transparent 42%);
}
.v15-color-hero-inner {
  position: relative;
  z-index: auto;
  grid-template-columns: minmax(510px, .82fr) minmax(620px, 1.18fr);
  gap: clamp(28px, 4vw, 76px);
  padding-block: 54px;
}
.v15-color-hero-copy { position: relative; z-index: 3; max-width: 820px; }
.v15-color-hero .breadcrumbs { margin-bottom: 31px; }
.v15-color-hero h1 { font-size: clamp(5.4rem, 7.4vw, 8.9rem); }
.v16-color-visual {
  position: relative;
  width: 100%;
  height: 580px;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(230,197,127,.28);
  border-radius: 2px 28px 28px 2px;
  background: #090b0e;
  box-shadow: 0 45px 140px rgba(0,0,0,.66), inset 0 1px rgba(255,255,255,.08);
  isolation: isolate;
}
.v16-color-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,6,8,.50), transparent 40%),
    linear-gradient(0deg, rgba(4,6,8,.88), transparent 42%);
}
.v16-color-visual::after {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1px 18px 18px 1px;
  pointer-events: none;
}
.v16-color-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
}
.v16-color-visual figcaption {
  position: absolute;
  left: 37px;
  right: 37px;
  bottom: 34px;
  z-index: 3;
  max-width: 560px;
  color: #fff;
}
.v16-color-visual figcaption span,
.v16-color-visual figcaption strong,
.v16-color-visual figcaption small { display: block; }
.v16-color-visual figcaption span { margin-bottom: 7px; color: var(--gold-2); font-size: .58rem; font-weight: 800; letter-spacing: .16em; }
.v16-color-visual figcaption strong { font-family: var(--serif); font-size: clamp(2.3rem, 3vw, 4.2rem); font-weight: 400; line-height: .95; letter-spacing: -.035em; }
.v16-color-visual figcaption small { max-width: 510px; margin-top: 8px; color: #c8cdd1; font-size: .7rem; line-height: 1.45; }

@media (max-width: 1440px) {
  .v15-color-hero-inner { grid-template-columns: minmax(470px, .9fr) minmax(540px, 1.1fr); }
  .v16-color-visual { height: 540px; }
}

@media (max-width: 1080px) {
  .v15-color-hero { height: auto; min-height: 1080px; }
  .v15-color-hero-inner { grid-template-columns: 1fr; align-content: center; gap: 42px; padding-block: 68px; }
  .v15-color-hero-copy { max-width: 800px; }
  .v16-color-visual { width: min(100%, 900px); height: auto; aspect-ratio: 1.78; justify-self: start; border-radius: 2px 24px 24px 2px; }
}

@media (max-width: 620px) {
  .v15-color-hero { min-height: 0; }
  .v15-color-hero-inner { gap: 30px; padding-block: 42px; }
  .v16-color-visual { aspect-ratio: 1.32; border-radius: 2px 18px 18px 2px; }
  .v16-color-visual::after { inset: 9px; border-radius: 1px 12px 12px 1px; }
  .v16-color-visual figcaption { left: 23px; right: 23px; bottom: 22px; }
  .v16-color-visual figcaption strong { font-size: 2.45rem; }
  .v16-color-visual figcaption small { display: none; }
}

@media print {
  .v16-color-visual { display: none !important; }
}

/* V17 — réglages fins de la home et héros couleur en pleine largeur */
.atlas-v11-card:nth-child(9),
.atlas-v11-card:nth-child(10) { grid-column: span 4; }

.home-audit {
  width: min(var(--site-width), calc(100% - 40px));
  padding: 18px 0 22px;
  color: #8f979f;
  border-top: 1px solid #252b31;
  background: transparent;
  font-size: .78rem;
  text-align: left;
}
.home-audit a { color: var(--gold-2); }

.lab-banner { min-height: 520px; }
.lab-banner-content { width: min(760px, 68%); padding: 48px 56px; }
.lab-banner h2 { font-size: clamp(2.7rem, 4vw, 4.7rem); }
.lab-tools { margin: 22px 0; }
.lab-tool { min-height: 76px; padding: 12px 14px; }
.lab-tool strong { margin-top: 5px; }

.v15-color-hero {
  height: 760px;
  background: #050709;
}
.v15-color-hero::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3,5,7,.98) 0%, rgba(3,5,7,.91) 36%, rgba(3,5,7,.58) 57%, rgba(3,5,7,.16) 79%, rgba(3,5,7,.24) 100%),
    linear-gradient(0deg, rgba(3,5,7,.82) 0%, transparent 46%);
}
.v15-color-hero::after { z-index: 4; }
.v15-color-hero-inner {
  position: relative;
  z-index: auto;
  display: block;
  height: 100%;
  padding-block: 48px;
}
.v15-color-hero-copy {
  position: relative;
  z-index: 5;
  display: flex;
  width: min(820px, 58%);
  height: 100%;
  max-width: none;
  flex-direction: column;
  justify-content: center;
}
.v16-color-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #050709;
  box-shadow: none;
  isolation: isolate;
  transform: translateX(-50%);
}
.v16-color-visual::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(3,5,7,.22), transparent 55%);
}
.v16-color-visual::after { display: none; }
.v16-color-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.v16-color-visual figcaption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 1281px) {
  .v11-hero,
  .v11-hero-inner,
  .v11-hero-copy { min-height: 960px; }
  .v11-hero-copy { padding-top: 48px; padding-bottom: 52px; }
  .v11-hero-copy > .v11-lab {
    background: transparent;
    backdrop-filter: none;
  }
  .v15-palette-picker { margin-top: 12px; padding-top: 12px; }
  .v15-palette-heading { margin-bottom: 10px; }
  .v15-palette-heading h3 { font-size: 1.32rem; }
  .v15-palette-heading > p { max-width: 285px; line-height: 1.3; }
  .v15-palette-groups { gap: 8px; }
  .v15-palette-group { padding: 7px 8px; }
  .v15-palette-group > strong { margin-bottom: 6px; }
  .v15-palette-group button { height: 31px; }
  .v15-live-harmony { margin-top: 8px; padding: 8px 10px; }
  .v15-harmony-swatches i { height: 34px; }
}

@media (max-width: 1080px) {
  .v15-color-hero { height: auto; min-height: 760px; }
  .v15-color-hero-inner { padding-block: 58px; }
  .v15-color-hero-copy { width: min(760px, 78%); }
  .v16-color-visual { width: 100vw; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .v16-color-visual img { object-position: 62% center; }
}

@media (max-width: 820px) {
  .lab-banner { min-height: 570px; }
  .lab-banner-content { width: 100%; padding: 32px; }
  .atlas-v11-card:nth-child(9),
  .atlas-v11-card:nth-child(10) { grid-column: span 1; }
}

@media (max-width: 620px) {
  .v15-color-hero { min-height: 720px; }
  .v15-color-hero-inner { padding-block: 38px; }
  .v15-color-hero-copy { width: 100%; }
  .v15-color-hero::before {
    background:
      linear-gradient(90deg, rgba(3,5,7,.92), rgba(3,5,7,.68)),
      linear-gradient(0deg, rgba(3,5,7,.95), transparent 58%);
  }
  .v16-color-visual img { object-position: 68% center; }
  .v15-color-hero .breadcrumbs { margin-bottom: 18px; }
  .v15-color-hero h1 { margin-bottom: 17px; }
  .v15-color-definition { margin-bottom: 20px; }
  .v15-hero-codes { margin-bottom: 20px; }
  .lab-banner { min-height: 540px; }
  .lab-tool { min-height: 72px; }
  .home-audit { width: calc(100% - 34px); }
}

@media print {
  .v16-color-visual { display: none !important; }
}


/* V18 — univers historiques visibles et guides couleur approfondis */
.v18-universes { padding-top: 78px; background: #fff; }
.v18-universe-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.v18-universe-card { position: relative; min-height: 250px; overflow: hidden; border: 1px solid #dfe3e6; border-radius: 14px; color: #fff; background: #090c0f; text-decoration: none; box-shadow: 0 16px 45px rgba(12,17,21,.10); isolation: isolate; }
.v18-universe-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(2,4,6,.92), rgba(2,4,6,.10) 72%); }
.v18-universe-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.v18-universe-card:hover img { transform: scale(1.045); }
.v18-universe-card span { position: absolute; left: 19px; right: 19px; bottom: 18px; z-index: 2; }
.v18-universe-card strong, .v18-universe-card small { display: block; }
.v18-universe-card strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.v18-universe-card small { margin-top: 7px; color: #d9dee2; font-size: .68rem; line-height: 1.35; }

.footer-universes { display: grid; grid-template-columns: 270px 1fr; gap: 44px; align-items: start; padding-block: 28px; border-top: 1px solid #252b31; }
.footer-universes h2 { margin: 4px 0 0; color: #fff; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; }
.footer-universes nav { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-universes nav a { padding: 8px 11px; color: #bfc5cb; border: 1px solid #2c3339; border-radius: 999px; font-size: .71rem; text-decoration: none; }
.footer-universes nav a:hover { color: var(--gold-2); border-color: rgba(230,197,127,.55); }

.v18-color-guide { border-top: 1px solid #dfe3e6; }
.v18-guide-lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .5fr); gap: 12px; margin-top: 34px; }
.v18-guide-lead article, .v18-guide-lead aside { padding: 36px; border: 1px solid #dfe3e6; border-radius: 14px; }
.v18-guide-lead article { background: #fff; }
.v18-guide-lead article small, .v18-guide-lead aside small { color: #70603b; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.v18-guide-lead h3 { margin: 9px 0 16px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.4rem); font-weight: 400; line-height: 1; }
.v18-guide-lead aside { position: relative; overflow: hidden; color: #fff; background: #090c0f; }
.v18-guide-lead aside::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; background: var(--guide-color); }
.v18-guide-lead aside strong { display: block; margin: 28px 0 16px; font-family: var(--serif); font-size: 3.2rem; font-weight: 400; }
.v18-guide-lead aside p { color: #c5cbd0; }
.v18-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.v18-guide-grid article { padding: 28px; border: 1px solid #dfe3e6; border-radius: 14px; background: #f4f6f7; }
.v18-guide-grid span { display: block; color: #8d6c24; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.v18-guide-grid h3 { margin: 10px 0 12px; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; }
.v18-guide-table-wrap { display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr); gap: 40px; margin-top: 52px; padding: 40px; color: #fff; border-radius: 16px; background: #0c1115; }
.v18-guide-table-wrap h3, .v18-support-protocol h3, .v18-color-universes h3 { margin: 8px 0 12px; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; line-height: 1; }
.v18-guide-table-wrap > div > p:last-child { color: #bfc6cc; }
.v18-guide-table-wrap table { width: 100%; border-collapse: collapse; }
.v18-guide-table-wrap th, .v18-guide-table-wrap td { padding: 15px 0; border-bottom: 1px solid #2a3137; vertical-align: top; text-align: left; }
.v18-guide-table-wrap th { width: 185px; padding-right: 26px; color: var(--gold-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.v18-guide-table-wrap td { color: #e0e4e7; line-height: 1.58; }
.v18-support-protocol { display: grid; grid-template-columns: minmax(260px, .45fr) minmax(0, 1fr); gap: 42px; margin-top: 52px; }
.v18-support-protocol ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v18-support-protocol li { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 17px 19px; border: 1px solid #dfe3e6; border-radius: 10px; background: #fff; }
.v18-support-protocol li strong { color: #72561b; }
.v18-color-universes { margin-top: 56px; padding: 38px; border: 1px solid #dfe3e6; border-radius: 16px; background: #f4f6f7; }
.v18-color-universes > div:first-child { max-width: 860px; }
.v18-color-universe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 28px; }
.v18-color-universe-grid a { padding: 19px; color: #fff; border-radius: 10px; background: #0d1216; text-decoration: none; }
.v18-color-universe-grid small, .v18-color-universe-grid strong, .v18-color-universe-grid span { display: block; }
.v18-color-universe-grid small { color: var(--gold-2); font-size: .59rem; letter-spacing: .1em; }
.v18-color-universe-grid strong { margin-top: 8px; font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.v18-color-universe-grid span { margin-top: 11px; color: #bfc6cc; font-size: .68rem; }
.v18-lexical-note { margin: 24px 0 0; padding: 16px 19px; border-left: 3px solid var(--color); background: #f4f6f7; }
.v18-lexical-note a { color: #604814; font-weight: 800; }

@media (max-width: 1280px) {
  .v18-universe-grid { grid-template-columns: repeat(3, 1fr); }
  .v18-color-universe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .v18-universe-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-universes, .v18-guide-lead, .v18-guide-table-wrap, .v18-support-protocol { grid-template-columns: 1fr; }
  .v18-guide-grid { grid-template-columns: 1fr; }
  .v18-guide-table-wrap { gap: 20px; padding: 30px; }
  .v18-support-protocol { gap: 20px; }
}
@media (max-width: 620px) {
  .v18-universes { padding-top: 55px; }
  .v18-universe-grid, .v18-color-universe-grid { grid-template-columns: 1fr; }
  .v18-universe-card { min-height: 230px; }
  .footer-universes { gap: 20px; }
  .v18-guide-lead article, .v18-guide-lead aside, .v18-color-universes { padding: 25px; }
  .v18-guide-table-wrap { padding: 24px; }
  .v18-guide-table-wrap table, .v18-guide-table-wrap tbody, .v18-guide-table-wrap tr, .v18-guide-table-wrap th, .v18-guide-table-wrap td { display: block; width: 100%; }
  .v18-guide-table-wrap th { padding-bottom: 5px; border: 0; }
  .v18-guide-table-wrap td { padding-top: 0; }
  .v18-support-protocol li { grid-template-columns: 1fr; gap: 5px; }
}

/* V19 — les dossiers constituent l'entrée principale de chaque univers. */
.v19-rubric-explorer {
  color: #fff;
  background: #0b0e11;
  border-top: 1px solid #272d31;
  border-bottom: 1px solid #272d31;
  padding: 50px 0 56px;
}
.v19-rubric-explorer-inner {
  display: grid;
  grid-template-columns: minmax(270px, .42fr) minmax(0, 1.58fr);
  gap: clamp(34px, 4vw, 78px);
  align-items: start;
}
.v19-rubric-explorer-head { max-width: 470px; }
.v19-rubric-explorer-head h2 {
  margin: 0 0 15px;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 3vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: .98;
}
.v19-rubric-explorer-head > p:last-child {
  max-width: 430px;
  margin: 0;
  color: #b8c0c5;
  font-size: .82rem;
  line-height: 1.6;
}
.v19-rubric-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.v19-rubric-links a {
  min-height: 82px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 17px;
  color: #fff;
  background: #13181c;
  border: 1px solid #30373c;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.v19-rubric-links a:hover,
.v19-rubric-links a:focus-visible {
  background: #192025;
  border-color: #d8b55d;
  transform: translateY(-2px);
}
.v19-rubric-links strong {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.14;
}
.v19-rubric-links span { color: #e4c775; font-size: 1rem; }

@media (max-width: 1500px) {
  .v19-rubric-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .v19-rubric-explorer-inner { grid-template-columns: 1fr; }
  .v19-rubric-explorer-head { max-width: 760px; }
  .v19-rubric-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .v19-rubric-explorer { padding: 36px 0 40px; }
  .v19-rubric-explorer-inner { gap: 26px; }
  .v19-rubric-links { grid-template-columns: 1fr; }
  .v19-rubric-links a { min-height: 68px; }
}

/* V20 — atlas des 63 fiches : serveur d'abord, tri et filtres en amélioration. */
.v20-atlas-page { background: #fff; }
.v20-atlas-hero .page-shell { padding-bottom: 54px !important; }
.v20-atlas-hero h1 { max-width: 1120px; }
.v20-atlas-hero .lead { max-width: 860px; }
.v20-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.v20-hero-facts span {
  min-height: 44px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px;
  color: #dce0e3;
  background: rgba(6, 9, 11, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 7px;
  font-size: .7rem;
  letter-spacing: .025em;
  backdrop-filter: blur(8px);
}
.v20-hero-facts strong { color: #f1d68d; font-family: var(--serif); font-size: 1.12rem; font-weight: 400; }
.v20-atlas-explorer {
  max-width: 1660px;
  padding-top: 68px;
  padding-bottom: 96px;
}
.v20-explorer-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;
  margin-bottom: 28px;
}
.v20-explorer-intro > div { max-width: 900px; }
.v20-explorer-intro h2,
.v20-atlas-guide > header h2,
.v20-trust-heading h2,
.v20-faq > header h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.35rem, 4vw, 4.8rem);
  letter-spacing: -.045em;
  line-height: .98;
}
.v20-explorer-intro > div > p:last-child,
.v20-atlas-guide > header > p:last-child,
.v20-trust-heading > p {
  max-width: 820px;
  margin: 15px 0 0;
  color: #5d6266;
  line-height: 1.7;
}
.v20-result-count {
  flex: none;
  margin: 0;
  padding: 9px 12px;
  color: #6d531b;
  background: #fff;
  border: 1px solid #c8b47c;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
}
.v20-atlas-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 20px;
  color: #fff;
  background: #0b0e11;
  border: 1px solid #262c31;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(8, 12, 16, .11);
}
.v20-atlas-toolbar label > span:first-child,
.v20-atlas-toolbar legend {
  display: block;
  margin-bottom: 8px;
  color: #bdc3c7;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.v20-search-field {
  min-height: 56px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  background: #151a1e;
  border: 1px solid #444b51;
  border-radius: 8px;
}
.v20-search-field > span { color: #e6c57f; font-size: 1.25rem; }
.v20-search-field input {
  min-width: 0;
  height: 54px;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
}
.v20-search-field input::placeholder { color: #889097; opacity: 1; }
.v20-search-field button {
  min-height: 38px;
  margin-right: 8px;
  padding: 0 12px;
  color: #cbd0d4;
  background: #22282d;
  border: 1px solid #3e464c;
  border-radius: 6px;
  cursor: pointer;
}
.v20-atlas-toolbar fieldset { min-width: 248px; margin: 0; padding: 0; border: 0; }
.v20-view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; background: #151a1e; border: 1px solid #444b51; border-radius: 8px; }
.v20-view-switch button {
  min-height: 47px;
  padding: 0 16px;
  color: #c9ced1;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.v20-view-switch button.is-active { color: #151515; background: #e6c57f; font-weight: 800; }
.v20-family-filters { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 54px; }
.v20-family-filters button {
  min-height: 38px;
  padding: 7px 12px;
  color: #4d5357;
  background: #fff;
  border: 1px solid #d6d9db;
  border-radius: 999px;
  cursor: pointer;
  font-size: .69rem;
}
.v20-family-filters button span { margin-left: 4px; color: #8b6a29; }
.v20-family-filters button.is-active { color: #fff; background: #101418; border-color: #101418; }
.v20-family-filters button.is-active span { color: #e6c57f; }
.v20-family-groups { display: grid; gap: 60px; }
.v20-family-group[hidden], .v20-color-card[hidden], .v20-atlas-feedback[hidden] { display: none !important; }
.v20-family-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid #d9dcde;
}
.v20-family-heading h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.65rem, 2.25vw, 2.65rem); font-weight: 400; letter-spacing: -.025em; }
.v20-family-heading span { color: #777d81; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.v20-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.v20-color-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9dcde;
  border-radius: 10px;
  box-shadow: 0 7px 24px rgba(8, 12, 16, .055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.v20-color-card:hover { border-color: #b99a52; box-shadow: 0 16px 38px rgba(8, 12, 16, .11); transform: translateY(-3px); }
.v20-color-panel {
  min-height: 126px;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  color: var(--card-ink);
  background: var(--card-color);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}
.v20-color-panel span {
  padding: 4px 7px;
  color: var(--card-ink);
  background: color-mix(in srgb, var(--card-color) 76%, transparent);
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
  font-weight: 800;
}
.v20-color-card-body { padding: 19px; }
.v20-card-family { min-height: 1.3em; margin: 0 0 4px; color: #8c6926; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.v20-color-card h4 { margin: 0; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; line-height: 1.05; }
.v20-color-card h4 a { text-decoration: none; }
.v20-color-card h4 a::after { content: ""; position: absolute; }
.v20-color-card-body > p:not(.v20-card-family) { min-height: 3.2em; margin: 9px 0 14px; color: #666b6f; font-size: .75rem; line-height: 1.55; }
.v20-card-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 7px; padding-top: 12px; border-top: 1px solid #e4e6e7; }
.v20-card-actions code { color: #22272a; font-size: .72rem; font-weight: 800; }
.v20-card-actions button {
  min-height: 31px;
  padding: 0 9px;
  color: #555c60;
  background: #f3f5f6;
  border: 1px solid #dadddf;
  border-radius: 5px;
  cursor: pointer;
  font-size: .62rem;
}
.v20-card-actions > a { justify-self: end; color: #795a1c; font-size: .67rem; font-weight: 800; text-decoration: none; }
.v20-color-card details { margin-top: 13px; border-top: 1px solid #e4e6e7; }
.v20-color-card summary { padding-top: 11px; color: #5e6468; cursor: pointer; font-size: .66rem; font-weight: 750; }
.v20-color-card dl { display: grid; gap: 5px; margin: 10px 0 0; }
.v20-color-card dl div { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: .66rem; }
.v20-color-card dt { color: #777d81; }
.v20-color-card dd { margin: 0; color: #272c2f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.v20-atlas-feedback { margin: 40px 0; padding: 42px; text-align: center; border: 1px dashed #b7bdc1; border-radius: 12px; }
.v20-atlas-feedback h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 2rem; font-weight: 400; }
.v20-atlas-feedback p { color: #686e72; }
.v20-atlas-feedback button { min-height: 42px; padding: 0 16px; color: #fff; background: #11161a; border: 0; border-radius: 6px; cursor: pointer; }
.v20-noscript { margin-top: 24px; padding: 14px 17px; color: #4b5155; border-left: 3px solid #c59a46; background: #f4f6f7; }

.v20-answer-band { padding: 76px 0; color: #fff; background: #0a0d10; }
.v20-answer-band .page-shell { max-width: 1460px; }
.v20-answer-band h2 { max-width: 1050px; margin: 0 0 22px; font-family: var(--serif); font-size: clamp(2.4rem, 4.6vw, 5.4rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.v20-answer-band .page-shell > p:not(.eyebrow) { max-width: 930px; margin: 0; color: #c7cdd1; font-family: var(--serif); font-size: clamp(1.15rem, 1.55vw, 1.48rem); line-height: 1.62; }
.v20-answer-band strong { color: #fff; font-weight: 700; }
.v20-answer-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.v20-answer-links a { padding: 10px 13px; color: #f0d48b; border: 1px solid #4a4432; border-radius: 6px; font-size: .7rem; font-weight: 800; text-decoration: none; }

.v20-atlas-guide { max-width: 1460px; padding-top: 90px; padding-bottom: 100px; }
.v20-atlas-guide > header { max-width: 920px; }
.v20-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 42px; border: 1px solid #dce0e2; }
.v20-guide-grid article { min-height: 265px; padding: 28px; border-right: 1px solid #dce0e2; }
.v20-guide-grid article:last-child { border-right: 0; }
.v20-guide-grid span { color: #c3a155; font-family: var(--serif); font-size: 1.4rem; }
.v20-guide-grid h3 { margin: 36px 0 10px; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; }
.v20-guide-grid p { margin: 0; color: #60666a; font-size: .8rem; line-height: 1.65; }
.v20-meaning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 68px; }
.v20-meaning-grid article { padding: clamp(28px, 4vw, 58px); border: 1px solid #dce0e2; }
.v20-meaning-grid article:first-child { color: #fff; background: #101419; border-color: #101419; }
.v20-meaning-grid article:first-child .eyebrow { color: #e4c879; }
.v20-meaning-grid article:first-child p:not(.eyebrow) { color: #c8cfd3; }
.v20-meaning-grid h3 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(1.8rem, 2.8vw, 3.15rem); font-weight: 400; line-height: 1.04; }
.v20-meaning-grid p:not(.eyebrow) { max-width: 70ch; color: #555b5f; line-height: 1.72; }
.v20-decision-table-wrap { margin-top: 68px; overflow-x: auto; border: 1px solid #dce0e2; }
.v20-decision-table { width: 100%; border-collapse: collapse; }
.v20-decision-table caption { padding: 24px; color: #fff; background: #101419; font-family: var(--serif); font-size: 1.65rem; text-align: left; }
.v20-decision-table th, .v20-decision-table td { padding: 17px 20px; border-bottom: 1px solid #dce0e2; text-align: left; vertical-align: top; }
.v20-decision-table thead th { color: #785a1c; background: #f4f6f7; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.v20-decision-table tbody th { width: 29%; font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.v20-decision-table tbody td { color: #596064; font-size: .78rem; }
.v20-decision-table tbody tr:last-child > * { border-bottom: 0; }

.v20-trust-section { padding: 88px 0; background: #f3f5f6; border-block: 1px solid #e0e3e5; }
.v20-trust-section .page-shell { max-width: 1460px; }
.v20-trust-heading { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); align-items: end; gap: 64px; }
.v20-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 45px; border: 1px solid #d8dcde; background: #fff; }
.v20-trust-grid article { min-height: 235px; padding: 30px; border-right: 1px solid #d8dcde; }
.v20-trust-grid article:last-child { border-right: 0; }
.v20-trust-grid h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.65rem; font-weight: 400; }
.v20-trust-grid p { color: #60666a; font-size: .79rem; line-height: 1.66; }
.v20-trust-grid a { color: #765717; font-size: .68rem; font-weight: 800; text-decoration: none; }
.v20-downloads { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin-top: 18px; padding: 22px; color: #fff; background: #101419; border-radius: 9px; }
.v20-downloads div { display: flex; flex-direction: column; }
.v20-downloads strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.v20-downloads span { color: #9fa7ac; font-size: .67rem; }
.v20-downloads a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 13px; color: #f1d78d; border: 1px solid #655638; border-radius: 6px; font-size: .67rem; font-weight: 800; text-decoration: none; }
.v20-reviewed { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 18px; padding: 20px 22px; background: #fff; border: 1px solid #d8dcde; border-radius: 9px; }
.v20-reviewed > div { display: flex; flex-direction: column; }
.v20-reviewed .eyebrow { margin-bottom: 4px; }
.v20-reviewed strong { font-family: var(--serif); font-size: 1.13rem; font-weight: 400; }
.v20-reviewed span { color: #6c7276; font-size: .68rem; }
.v20-reviewed > div:last-child { flex-direction: row; flex-wrap: wrap; gap: 7px; }
.v20-reviewed a { padding: 7px 10px; color: #69501b; border: 1px solid #d2c290; border-radius: 5px; font-size: .65rem; font-weight: 800; text-decoration: none; }

.v20-faq { max-width: 1460px; display: grid; grid-template-columns: minmax(280px, .55fr) minmax(0, 1.45fr); gap: 72px; padding-top: 90px; padding-bottom: 100px; }
.v20-faq > header { position: sticky; top: 104px; align-self: start; }
.v20-faq > div { border-top: 1px solid #dce0e2; }
.v20-faq details { border-bottom: 1px solid #dce0e2; }
.v20-faq summary { padding: 24px 42px 24px 0; cursor: pointer; font-family: var(--serif); font-size: 1.35rem; list-style-position: outside; }
.v20-faq details p { max-width: 76ch; margin: 0; padding: 0 0 25px; color: #5d6367; line-height: 1.72; }
.v20-primary-sources { grid-column: 2; max-width: 80ch; margin: -40px 0 0; color: #73797d; font-size: .7rem; line-height: 1.65; }
.v20-primary-sources a { color: #684d15; }

.v20-palette-archives {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: 42px;
  margin-top: 64px;
  padding: 32px;
  color: #fff;
  background: #101419;
  border-radius: 12px;
}
.v20-palette-archives h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 2.5vw, 2.8rem); font-weight: 400; line-height: 1.03; }
.v20-palette-archives > div:last-child { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.v20-palette-archives a { min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 17px; color: #fff; background: #171d22; border: 1px solid #343c42; border-radius: 7px; text-decoration: none; }
.v20-palette-archives a:hover { border-color: #d4b35e; }
.v20-palette-archives strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }
.v20-palette-archives span { margin-top: 5px; color: #d8bd72; font-size: .66rem; }

@media (max-width: 1280px) {
  .v20-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v20-guide-grid { grid-template-columns: repeat(2, 1fr); }
  .v20-guide-grid article:nth-child(2) { border-right: 0; }
  .v20-guide-grid article:nth-child(-n+2) { border-bottom: 1px solid #dce0e2; }
  .v20-trust-heading { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 820px) {
  .v20-atlas-hero .page-shell { padding-bottom: 38px !important; }
  .v20-hero-facts { gap: 6px; margin-top: 22px; }
  .v20-hero-facts span { flex: 1 1 calc(50% - 6px); }
  .v20-atlas-explorer { padding-top: 48px; padding-bottom: 70px; }
  .v20-explorer-intro { align-items: start; flex-direction: column; gap: 16px; }
  .v20-atlas-toolbar { grid-template-columns: 1fr; }
  .v20-atlas-toolbar fieldset { min-width: 0; }
  .v20-family-filters { flex-wrap: nowrap; margin-right: -4vw; padding-right: 4vw; overflow-x: auto; scrollbar-width: thin; }
  .v20-family-filters button { flex: none; }
  .v20-family-groups { gap: 48px; }
  .v20-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v20-guide-grid, .v20-meaning-grid, .v20-trust-grid, .v20-faq { grid-template-columns: 1fr; }
  .v20-guide-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid #dce0e2; }
  .v20-guide-grid article:last-child { border-bottom: 0; }
  .v20-guide-grid h3 { margin-top: 22px; }
  .v20-trust-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid #d8dcde; }
  .v20-trust-grid article:last-child { border-bottom: 0; }
  .v20-downloads { grid-template-columns: 1fr 1fr; }
  .v20-downloads div { grid-column: 1 / -1; }
  .v20-reviewed { align-items: start; flex-direction: column; }
  .v20-faq { gap: 34px; }
  .v20-faq > header { position: static; }
  .v20-primary-sources { grid-column: 1; margin-top: -6px; }
  .v20-palette-archives { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .v20-hero-facts span { flex-basis: 100%; }
  .v20-atlas-explorer { padding-top: 40px; padding-bottom: 58px; }
  .v20-atlas-toolbar { padding: 13px; }
  .v20-search-field { grid-template-columns: auto minmax(0, 1fr); }
  .v20-search-field button { grid-column: 1 / -1; width: calc(100% - 8px); margin: 0 8px 8px 0; }
  .v20-family-filters { margin-bottom: 38px; }
  .v20-color-grid { grid-template-columns: 1fr; }
  .v20-color-panel { min-height: 142px; }
  .v20-color-card-body > p:not(.v20-card-family) { min-height: 0; }
  .v20-card-actions { grid-template-columns: auto auto; }
  .v20-card-actions > a { grid-column: 1 / -1; justify-self: stretch; padding-top: 7px; }
  .v20-answer-band { padding: 56px 0; }
  .v20-atlas-guide, .v20-trust-section, .v20-faq { padding-top: 62px; padding-bottom: 68px; }
  .v20-meaning-grid { margin-top: 48px; }
  .v20-decision-table-wrap { margin-top: 48px; }
  .v20-decision-table { min-width: 720px; }
  .v20-downloads { grid-template-columns: 1fr; }
  .v20-downloads div { grid-column: auto; }
  .v20-downloads a { justify-content: center; }
  .v20-faq summary { padding-right: 15px; font-size: 1.15rem; }
  .v20-palette-archives { margin-top: 44px; padding: 22px; }
  .v20-palette-archives > div:last-child { grid-template-columns: 1fr; }
}
@media print {
  .v20-atlas-toolbar, .v20-family-filters, .v20-card-actions button, .v20-downloads { display: none !important; }
  .v20-color-grid { grid-template-columns: repeat(3, 1fr); }
  .v20-color-card { break-inside: avoid; box-shadow: none; }
}

/* V21 — atlas approfondi, navigation de fiche et outils sans hydratation héritée. */
.v20-view-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v20-atlas-toolbar fieldset { min-width: 390px; }
.v20-view-switch button { white-space: nowrap; }

.v21-spectrum-rail {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 86px;
  margin: 0 0 16px;
  overflow: hidden;
  background: #101418;
  border: 1px solid #252b30;
  border-radius: 12px;
}
.v21-spectrum-rail a {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 3px;
  padding: 38px 10px 10px;
  color: #fff;
  background: linear-gradient(to bottom, var(--rail) 0 8px, transparent 8px);
  border-right: 1px solid rgba(255, 255, 255, .13);
  text-decoration: none;
}
.v21-spectrum-rail a:last-child { border-right: 0; }
.v21-spectrum-rail a:hover,
.v21-spectrum-rail a:focus-visible { background-color: #1b2228; outline: 2px solid #e3c676; outline-offset: -2px; }
.v21-spectrum-rail span { overflow: hidden; font-size: .58rem; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; }
.v21-spectrum-rail small { color: #b7bec3; font-size: .61rem; }

.v21-color-panel {
  min-height: 126px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--card-ink);
  background: var(--card-color);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  text-decoration: none;
}
.v21-color-panel span,
.v21-color-panel small {
  padding: 4px 7px;
  color: var(--card-ink);
  background: color-mix(in srgb, var(--card-color) 76%, transparent);
  border: 1px solid currentColor;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .62rem;
  font-weight: 800;
}
.v21-color-panel small { max-width: 46%; text-align: right; }
.v21-color-panel:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

.v21-dictionary-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  margin: -26px 0 54px;
  padding: 26px 28px;
  color: #fff;
  background: #101418;
  border: 1px solid #2f373d;
  border-radius: 10px;
}
.v21-dictionary-callout h3 { margin: 0 0 7px; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 400; }
.v21-dictionary-callout p:not(.eyebrow) { max-width: 850px; margin: 0; color: #b8c0c5; font-size: .76rem; line-height: 1.6; }
.v21-dictionary-callout > a { min-height: 46px; display: inline-flex; align-items: center; padding: 0 16px; color: #171717; background: #e5c677; border-radius: 6px; font-size: .7rem; font-weight: 850; text-decoration: none; white-space: nowrap; }

.v21-color-sequence {
  max-width: 1660px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  padding-top: 18px;
}
.v21-color-sequence a { min-height: 58px; display: flex; flex-direction: column; justify-content: center; padding: 9px 14px; color: #2d3337; background: #fff; border: 1px solid #dadddf; border-radius: 7px; text-decoration: none; }
.v21-color-sequence a:nth-child(2) { min-width: 132px; text-align: center; }
.v21-color-sequence a:last-child { align-items: flex-end; text-align: right; }
.v21-color-sequence a:hover { border-color: var(--color, #ad873d); }
.v21-color-sequence small { color: #7a8185; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.v21-color-sequence strong { margin-top: 2px; font-family: var(--serif); font-size: .98rem; font-weight: 400; }

.v21-machine-links {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(3, auto);
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 18px;
  color: #fff;
  background: #11161a;
  border-radius: 8px;
}
.v15-source-columns > .v21-machine-links { grid-column: 1 / -1; }
.v21-machine-links > div { display: flex; flex-direction: column; }
.v21-machine-links strong { font-family: var(--serif); font-size: 1.16rem; font-weight: 400; }
.v21-machine-links span { margin-top: 2px; color: #aeb6bb; font-size: .62rem; }
.v21-machine-links a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 11px; color: #ead088; border: 1px solid #554b35; border-radius: 5px; font-size: .63rem; font-weight: 800; text-decoration: none; }

.dictionary-row[hidden] { display: none !important; }
.v21-dictionary-more { width: 100%; margin-top: 12px; border: 1px solid #c9a95f; cursor: pointer; }
.v21-dictionary-more[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .v21-spectrum-rail { grid-template-columns: repeat(6, 1fr); }
  .v21-spectrum-rail a:nth-child(6) { border-right: 0; }
  .v20-atlas-toolbar fieldset { min-width: 330px; }
}
@media (max-width: 820px) {
  .v20-atlas-toolbar fieldset { min-width: 0; }
  .v21-spectrum-rail { display: flex; min-height: 78px; overflow-x: auto; }
  .v21-spectrum-rail a { min-width: 142px; }
  .v21-dictionary-callout { grid-template-columns: 1fr; gap: 18px; margin-top: -12px; }
  .v21-dictionary-callout > a { justify-content: center; }
  .v21-machine-links { grid-template-columns: 1fr 1fr; }
  .v21-machine-links > div { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .v20-view-switch { grid-template-columns: 1fr; }
  .v20-view-switch button { min-height: 41px; }
  .v21-color-sequence { grid-template-columns: 1fr 1fr; }
  .v21-color-sequence a:nth-child(2) { display: none; }
  .v21-machine-links { grid-template-columns: 1fr; }
  .v21-machine-links > div { grid-column: auto; }
  .v21-machine-links a { justify-content: center; }
}

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

/* CODE COULEUR V22 — CONTENUS CIBLÉS */
.v22-page-specific,.v22-dictionary-insight,.v22-tool-depth,.v22-palette-depth,.v22-reference-depth,.v22-hub-depth,.v22-dictionary-hub,.v22-palette-archive{margin:clamp(2rem,4vw,4rem) 0;padding:clamp(1.35rem,2.5vw,2.4rem);border:1px solid #dedbd4;border-left:4px solid var(--legacy-accent,#caa650);background:#f7f5f0;color:#151719}
.v22-page-specific h2,.v22-dictionary-insight h2,.v22-tool-depth h2,.v22-palette-depth h2,.v22-reference-depth h2,.v22-hub-depth h2,.v22-dictionary-hub h2,.v22-palette-archive h2{margin:.2rem 0 .8rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.04}
.v22-page-specific>p,.v22-hub-depth>p,.v22-palette-archive>p,.v22-dictionary-hub>p{max-width:78ch;line-height:1.7}
.v22-decision-grid,.v22-tool-depth>div,.v22-palette-depth>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.25rem;background:#d8d4ca;border:1px solid #d8d4ca}
.v22-decision-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.v22-decision-grid article,.v22-tool-depth article,.v22-palette-depth article{padding:1.1rem;background:#fff}
.v22-decision-grid h3,.v22-tool-depth h3,.v22-palette-depth h3{margin:0 0 .5rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.v22-decision-grid p,.v22-tool-depth p,.v22-palette-depth p{margin:0;line-height:1.6}
.v22-hub-depth>div,.v22-dictionary-hub>div,.v22-palette-archive>a,.v22-reference-depth nav{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.15rem}
.v22-hub-depth a,.v22-dictionary-hub a,.v22-palette-archive>a,.v22-reference-depth a{display:inline-flex;padding:.65rem .85rem;border:1px solid #bbb5a8;color:inherit;text-decoration:none;font-weight:700}
.v22-dictionary-insight{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:1.5rem}
.v22-dictionary-insight dl{margin:0;display:grid;gap:.5rem}
.v22-dictionary-insight dl>div{padding:.75rem;background:#fff;border:1px solid #e0ddd6}
.v22-dictionary-insight dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#6a665e}
.v22-dictionary-insight dd{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 0;font-weight:700}
.v22-dictionary-insight dd span{width:1.2rem;height:1.2rem;background:var(--chip);border:1px solid #aaa}
.v22-data-note,.v22-dictionary-links{grid-column:1/-1}
.v22-dictionary-links{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.v22-dictionary-links a{padding:.45rem .7rem;border:1px solid #c8c3b7;color:inherit;text-decoration:none}
.v22-reference-depth>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;max-width:1100px}
.v22-reference-depth p{line-height:1.7}
.v22-palette-archive{margin-left:auto;margin-right:auto}
@media (max-width:780px){.v22-decision-grid,.v22-tool-depth>div,.v22-palette-depth>div,.v22-reference-depth>div,.v22-dictionary-insight{grid-template-columns:1fr}.v22-data-note,.v22-dictionary-links{grid-column:auto}}


/* V23 — contenus spécifiques et preuves calculées */
.v23-specific-guide,.v23-card-decision,.v23-politics-evidence,.v23-related-context,.v23-palette-matrix,.v23-proof-checklist{margin:clamp(28px,4vw,56px) 0;padding:clamp(24px,3vw,40px);border:1px solid #dedbd3;background:#f7f5ef}
.v23-specific-guide>h2,.v23-card-decision>h2,.v23-politics-evidence>h2,.v23-related-context>h2,.v23-palette-matrix>h2,.v23-proof-checklist>h2{max-width:860px;margin:.35rem 0 1.1rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(1.65rem,2.8vw,2.55rem);line-height:1.03}
.v23-specific-guide>div,.v23-card-decision>div,.v23-politics-evidence>div,.v23-related-context>div,.v23-proof-checklist>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.5rem;background:#d8d4ca;border:1px solid #d8d4ca}
.v23-specific-guide article,.v23-card-decision article,.v23-politics-evidence article,.v23-proof-checklist article{padding:22px;background:#fff}
.v23-specific-guide article>span,.v23-proof-checklist article>span{display:block;margin-bottom:1rem;color:#a67b28;font:700 .73rem/1 Arial,sans-serif;letter-spacing:.12em}
.v23-specific-guide h3,.v23-proof-checklist h3{margin:.15rem 0 .7rem;font-family:var(--font-display,Georgia,serif);font-size:1.2rem;line-height:1.15}
.v23-specific-guide p,.v23-card-decision p,.v23-politics-evidence p,.v23-related-context p,.v23-palette-matrix p,.v23-proof-checklist p{max-width:900px;line-height:1.72}
.v23-card-decision>div article,.v23-politics-evidence>div article{display:grid;gap:.4rem}
.v23-card-decision article strong,.v23-politics-evidence article strong{font-family:var(--font-display,Georgia,serif);font-size:1.08rem}
.v23-card-decision article span,.v23-politics-evidence article span{color:#555}
.v23-related-context>div a{display:grid;gap:.35rem;padding:20px;background:#fff;color:inherit;text-decoration:none}
.v23-related-context>div a:hover strong,.v23-related-context>div a:focus-visible strong{text-decoration:underline;text-decoration-color:#c6973c;text-underline-offset:4px}
.v23-related-context small{color:#756f64;font:700 .67rem/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.v23-related-context strong{font-family:var(--font-display,Georgia,serif);font-size:1.05rem;line-height:1.25}
.v23-method-note{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid #d8d4ca;color:#4f4b44;font-size:.93rem}
.v23-table-wrap{overflow-x:auto;margin-top:1.35rem;border:1px solid #d8d4ca;background:#fff}
.v23-palette-matrix table{width:100%;border-collapse:collapse;min-width:620px}
.v23-palette-matrix th,.v23-palette-matrix td{padding:14px 16px;border-bottom:1px solid #e5e1d8;text-align:left;vertical-align:middle}
.v23-palette-matrix thead th{background:#12161a;color:#fff;font:700 .7rem/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.v23-palette-matrix tbody th{font-weight:500}
.v23-palette-matrix tbody span{display:inline-block;width:16px;height:16px;margin-right:9px;border:1px solid rgba(0,0,0,.15);background:var(--pair);vertical-align:-3px}
.v23-palette-matrix code{margin-left:.35rem;color:#635e55;font-size:.78rem}
.v23-proof-checklist.page-shell{max-width:var(--page-width,1460px)}
.v23-proof-checklist{background:#11161b;color:#f4f1e9;border-color:#242b31}
.v23-proof-checklist article{background:#171d22;color:#f4f1e9}
.v23-proof-checklist article p{color:#cbd0d2}
.v23-proof-checklist .v23-method-note{border-color:#333a40;color:#adb5b9}
@media(max-width:780px){.v23-specific-guide>div,.v23-card-decision>div,.v23-politics-evidence>div,.v23-related-context>div,.v23-proof-checklist>div{grid-template-columns:1fr}.v23-specific-guide,.v23-card-decision,.v23-politics-evidence,.v23-related-context,.v23-palette-matrix,.v23-proof-checklist{padding:22px 18px}}


/* V24 — seconde passe éditoriale */
.v24-archive-decision,.v24-correction-cases,.v24-correction-lifecycle,.v24-meaning-evidence{margin:clamp(30px,4vw,58px) auto;padding:clamp(24px,3.2vw,42px);border:1px solid #dcd8cf;background:#f7f5ef}
.v24-archive-decision>h2,.v24-correction-cases>h2,.v24-correction-lifecycle>h2,.v24-meaning-evidence>h2{max-width:900px;margin:.35rem 0 1rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(1.7rem,2.8vw,2.65rem);line-height:1.04}
.v24-archive-decision>p,.v24-correction-cases>p,.v24-meaning-evidence>p{max-width:920px;line-height:1.7}
.v24-archive-decision>div,.v24-correction-lifecycle>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:1.5rem;border:1px solid #d7d2c8;background:#d7d2c8}
.v24-archive-decision article,.v24-correction-lifecycle article{padding:22px;background:#fff}
.v24-archive-decision h3,.v24-correction-lifecycle h3{margin:.15rem 0 .65rem;font-family:var(--font-display,Georgia,serif);font-size:1.18rem;line-height:1.15}
.v24-archive-decision article p,.v24-correction-lifecycle article p{line-height:1.65}
.v24-archive-decision article p+p{margin-top:.8rem;color:#4d4942}
.v24-method-note{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid #d8d4ca;color:#504b43;font-size:.94rem}
.v24-table-wrap{overflow-x:auto;margin-top:1.35rem;border:1px solid #d8d4ca;background:#fff}
.v24-table-wrap table{width:100%;min-width:720px;border-collapse:collapse}
.v24-table-wrap th,.v24-table-wrap td{padding:14px 16px;border-bottom:1px solid #e6e1d7;text-align:left;vertical-align:top;line-height:1.5}
.v24-table-wrap thead th{background:#11161b;color:#fff;font:700 .7rem/1.2 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.v24-table-wrap tbody th{width:22%;font-family:var(--font-display,Georgia,serif);font-size:1rem}
.v24-correction-lifecycle>div{grid-template-columns:repeat(4,minmax(0,1fr))}
.v24-correction-lifecycle article>span{display:block;margin-bottom:1rem;color:#a67b28;font:700 .72rem/1 Arial,sans-serif;letter-spacing:.12em}
@media(max-width:900px){.v24-correction-lifecycle>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.v24-archive-decision>div,.v24-correction-lifecycle>div{grid-template-columns:1fr}.v24-archive-decision,.v24-correction-cases,.v24-correction-lifecycle,.v24-meaning-evidence{padding:22px 18px}.v24-table-wrap{margin-left:-4px;margin-right:-4px}}


/* V26 — corpus de référence et citabilité */
.v25-reference-hero,.v25-css-hero,.v25-css-index-hero{padding:clamp(52px,7vw,92px) 0;background:#090d10;color:#fff}
.v25-reference-hero{background:radial-gradient(circle at 82% 35%,color-mix(in srgb,var(--ref) 72%,transparent),transparent 36%),#090d10}
.v25-reference-hero-grid,.v25-css-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.7fr);gap:clamp(28px,5vw,80px);align-items:end}
.v25-reference-hero h1,.v25-css-hero h1,.v25-css-index-hero h1{max-width:900px;margin:.25rem 0 .8rem;font-family:var(--font-display,Georgia,serif);font-size:clamp(3.2rem,7vw,6.8rem);line-height:.88;letter-spacing:-.045em}
.v25-reference-hero .lead,.v25-css-hero .lead,.v25-css-index-hero .lead{max-width:780px;color:#e5e8e9;line-height:1.65}
.v25-hero-code{display:flex;gap:10px;align-items:center;margin-top:1.4rem}.v25-hero-code strong{font:700 1.25rem/1 monospace}.v25-hero-code button,.v25-citation-box button,.v25-citation-formats button{padding:11px 14px;border:1px solid #d4aa4d;background:#d4aa4d;color:#111;font-weight:800;cursor:pointer}
.v25-reference-swatch,.v25-css-sample{display:flex;min-height:260px;padding:24px;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.25);box-shadow:0 22px 70px rgba(0,0,0,.35)}
.v25-reference-swatch span,.v25-css-sample strong{font:700 clamp(2rem,4vw,4rem)/.95 var(--font-display,Georgia,serif)}.v25-reference-swatch code,.v25-css-sample code{margin-top:.65rem;font:700 1rem/1 monospace}
.v25-local-nav{position:sticky;top:70px;z-index:12;border-bottom:1px solid #ddd8ce;background:rgba(255,255,255,.95);backdrop-filter:blur(10px)}.v25-local-nav>div{display:flex;gap:20px;overflow-x:auto}.v25-local-nav a{flex:none;padding:14px 0;color:#222;font:700 .72rem/1 Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.v25-reference-content{padding-top:clamp(34px,5vw,72px);padding-bottom:clamp(55px,7vw,100px)}
.v25-direct-answer,.v25-css-answer{padding:clamp(24px,3.6vw,46px);border:1px solid #d8d3ca;border-left:4px solid #c69b3a;background:#f7f5ef}.v25-direct-answer h2,.v25-css-answer h2{max-width:950px;margin:.3rem 0 .9rem;font:500 clamp(1.7rem,3.2vw,3rem)/1.05 var(--font-display,Georgia,serif)}.v25-direct-answer p,.v25-css-answer p{max-width:1000px;line-height:1.7}
.v25-reference-section{padding:clamp(42px,6vw,82px) 0;border-bottom:1px solid #ded9cf}.v25-section-heading{max-width:920px;margin-bottom:24px}.v25-section-heading h2{margin:.3rem 0 .7rem;font:500 clamp(1.9rem,3.4vw,3.15rem)/1.04 var(--font-display,Georgia,serif)}.v25-section-heading p,.v25-reference-section>p,.v25-reference-section li{line-height:1.72}.v25-source-near{padding:14px 16px;border-left:3px solid #c69b3a;background:#f4f1e9;color:#403c35}
.v25-code-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.v25-code-grid button{min-width:0;padding:18px;border:1px solid #d9d4ca;background:#fff;text-align:left;cursor:pointer}.v25-code-grid small,.v25-code-grid span{display:block;color:#625d54}.v25-code-grid small{font:700 .68rem/1.2 Arial,sans-serif;letter-spacing:.08em}.v25-code-grid code{display:block;overflow:hidden;margin:.75rem 0;text-overflow:ellipsis;font-size:clamp(.85rem,1.2vw,1rem);white-space:nowrap}
.v25-tone-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.v25-tone-grid button{padding:0;border:1px solid #d8d3ca;background:#fff;text-align:left;cursor:pointer}.v25-tone-grid i{display:block;height:120px;background:var(--tone)}.v25-tone-grid code,.v25-tone-grid span{display:block;padding:9px 10px}.v25-tone-grid span{padding-top:0;color:#625d54;font-size:.75rem}
.v25-contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.v25-contrast-grid>div{display:flex;min-height:170px;padding:22px;flex-direction:column;justify-content:flex-end}.v25-contrast-grid strong{font:700 1.4rem/1.1 var(--font-display,Georgia,serif)}.v25-contrast-grid span{margin:.4rem 0;font:800 1.2rem/1 monospace}
.v25-nearby-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.v25-nearby-grid a{display:grid;grid-template-columns:58px 1fr;padding:12px;border:1px solid #d8d3ca;color:#111}.v25-nearby-grid i{grid-row:1/4;width:46px;height:100%;background:var(--near)}.v25-nearby-grid strong,.v25-nearby-grid code,.v25-nearby-grid small{grid-column:2}.v25-nearby-grid small{color:#676158}
.v25-advice-grid,.v25-intent-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.v25-advice-grid article,.v25-intent-grid a{padding:22px;border:1px solid #d8d3ca;background:#fff}.v25-advice-grid h3,.v25-intent-grid strong{display:block;margin:0 0 .65rem;font:700 1.25rem/1.15 var(--font-display,Georgia,serif)}.v25-intent-grid a{color:#111}.v25-intent-grid span{display:block;color:#5e5950;line-height:1.55}.v25-code-example{overflow-x:auto;margin-top:20px;padding:22px;background:#0d1216;color:#f7f0dc;line-height:1.6}
.v25-citation-box{display:grid;grid-template-columns:1fr auto;gap:18px;margin:clamp(42px,6vw,82px) 0;padding:clamp(24px,3.5vw,44px);border:1px solid #cda847;background:#10161a;color:#fff}.v25-citation-box h2{margin:.25rem 0 .5rem;font:500 clamp(1.7rem,3vw,2.7rem)/1.05 var(--font-display,Georgia,serif)}.v25-citation-box code{grid-column:1/-1;padding:14px;border:1px solid #323b40;background:#070a0c;color:#ece6d8;white-space:normal;line-height:1.55}.v25-citation-box>p{grid-column:1/-1}.v25-citation-box a{color:#e4bd63}.v25-sources{background:#f7f5ef;padding-left:clamp(20px,4vw,50px);padding-right:clamp(20px,4vw,50px)}
.v25-hub-hero,.v25-citation-hero{background:#0b1014;color:#fff}.v25-hub-intro,.v25-css-answer,.v25-home-reference{padding-top:clamp(42px,6vw,78px);padding-bottom:clamp(42px,6vw,78px)}.v25-hub-intro>div:first-child,.v25-home-reference>div:first-child{max-width:900px;margin-bottom:24px}.v25-hub-intro h2,.v25-home-reference h2{margin:.3rem 0 .8rem;font:500 clamp(2rem,3.6vw,3.4rem)/1 var(--font-display,Georgia,serif)}
.v25-hub-browser,.v25-css-browser{padding-bottom:clamp(60px,8vw,110px)}.v25-hub-toolbar,.v25-css-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:18px;align-items:end;margin-bottom:22px;padding:18px;border:1px solid #d8d3ca;background:#f7f5ef}.v25-hub-toolbar label span,.v25-css-toolbar label span,.v25-hub-toolbar legend,.v25-css-toolbar legend{display:block;margin-bottom:8px;font:700 .68rem/1 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}.v25-hub-toolbar input,.v25-css-toolbar input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #aaa;background:#fff}.v25-hub-toolbar fieldset,.v25-css-toolbar fieldset{display:flex;gap:6px;border:0}.v25-hub-toolbar button,.v25-css-toolbar button{padding:11px 13px;border:1px solid #aaa;background:#fff;cursor:pointer}.v25-hub-toolbar button.is-active,.v25-css-toolbar button.is-active{background:#10161a;color:#fff}
.v25-ref-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.v25-ref-card{display:grid;grid-template-columns:74px 1fr auto;grid-template-rows:auto auto;padding:10px;border:1px solid #d8d3ca;color:#111}.v25-ref-card>i{display:flex;grid-row:1/3;width:62px;height:74px;align-items:flex-end;padding:6px;background:var(--card);color:var(--ink);font-style:normal}.v25-ref-card>i span{font:700 .64rem/1 monospace}.v25-ref-card strong{align-self:end;font:700 1.05rem/1.1 var(--font-display,Georgia,serif)}.v25-ref-card small{grid-column:2;overflow:hidden;color:#686158;text-overflow:ellipsis;white-space:nowrap}.v25-ref-card>code{grid-column:3;grid-row:1/3;align-self:center;font-size:.72rem}
.v25-hub-method{margin-bottom:clamp(55px,7vw,95px);padding:clamp(26px,4vw,48px);border:1px solid #d8d3ca;background:#f7f5ef}.v25-hub-method h2{margin:.3rem 0 1rem;font:500 clamp(1.8rem,3.2vw,3rem)/1.05 var(--font-display,Georgia,serif)}.v25-hub-method>div{display:grid;grid-template-columns:1fr 1fr;gap:28px}.v25-hub-method p{line-height:1.72}
.v25-css-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.5rem}.v25-css-facts span{padding:10px 13px;border:1px solid rgba(255,255,255,.28)}.v25-css-facts strong{color:#e0ba5e}.v25-css-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.v25-css-card{display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px;border:1px solid #d8d3ca}.v25-css-card>div{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;grid-row:1/3}.v25-css-card i{grid-row:1/3;width:36px;height:45px;border:1px solid #bbb;background:var(--css)}.v25-css-card strong{align-self:end}.v25-css-card code{grid-column:2;color:#655f55;font-size:.72rem}.v25-css-card button,.v25-css-card a{padding:7px 9px;border:1px solid #bbb;background:#fff;color:#111;font-size:.68rem;cursor:pointer}.v25-css-card a{align-self:end}
.v25-css-disambiguation{display:grid;grid-template-columns:1fr minmax(190px,260px);gap:24px;margin:28px 0;padding:clamp(22px,3vw,36px);border:1px solid #d5aa48;background:#fbf7eb}.v25-css-disambiguation h2{margin:.3rem 0 .7rem;font:500 clamp(1.6rem,2.6vw,2.45rem)/1.05 var(--font-display,Georgia,serif)}.v25-css-disambiguation p{line-height:1.65}.v25-css-disambiguation>a{display:flex;padding:18px;border:1px solid #d5aa48;background:#fff;color:#111;flex-direction:column;justify-content:center}.v25-css-disambiguation>a strong{margin:.5rem 0;font:800 1.55rem/1 monospace}.v25-css-disambiguation>.v25-source-near{grid-column:1/-1;margin:0}
.v25-atlas-extension{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;margin:20px 0;padding:22px;border:1px solid #d5aa48;background:#fbf7eb}.v25-atlas-extension h3{margin:.2rem 0;font:700 1.35rem/1.1 var(--font-display,Georgia,serif)}.v25-atlas-extension p{max-width:780px}.v25-atlas-extension>a{padding:12px 14px;border:1px solid #111;color:#111;font-weight:700}
.v25-citation-formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.v25-citation-formats article{display:flex;min-width:0;padding:18px;border:1px solid #d8d3ca;flex-direction:column}.v25-citation-formats code{overflow-wrap:anywhere;line-height:1.6}.v25-citation-formats button{align-self:flex-start;margin-top:auto}
@media(max-width:1050px){.v25-code-grid,.v25-ref-grid,.v25-css-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v25-tone-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.v25-nearby-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v25-atlas-extension{grid-template-columns:1fr 1fr}.v25-atlas-extension>div{grid-column:1/-1}}
@media(max-width:760px){.v25-reference-hero-grid,.v25-css-hero-grid{grid-template-columns:1fr}.v25-reference-swatch,.v25-css-sample{min-height:190px}.v25-local-nav{top:60px}.v25-hub-toolbar,.v25-css-toolbar{grid-template-columns:1fr}.v25-advice-grid,.v25-intent-grid,.v25-citation-formats,.v25-hub-method>div{grid-template-columns:1fr}.v25-nearby-grid{grid-template-columns:1fr 1fr}.v25-citation-box{grid-template-columns:1fr}.v25-citation-box button{justify-self:start}.v25-css-disambiguation{grid-template-columns:1fr}.v25-css-disambiguation>.v25-source-near{grid-column:1}.v25-atlas-extension{grid-template-columns:1fr}.v25-atlas-extension>div{grid-column:1}.v25-local-nav>div{padding-left:16px;padding-right:16px}}
@media(max-width:520px){.v25-code-grid,.v25-ref-grid,.v25-css-grid,.v25-contrast-grid,.v25-nearby-grid{grid-template-columns:1fr}.v25-tone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v25-reference-hero h1,.v25-css-hero h1,.v25-css-index-hero h1{font-size:clamp(2.8rem,15vw,4.4rem)}.v25-hub-toolbar fieldset,.v25-css-toolbar fieldset{display:grid;grid-template-columns:1fr 1fr}.v25-hub-toolbar fieldset button:last-child,.v25-css-toolbar fieldset button:last-child{grid-column:1/-1}}


/* V26 — comparaisons, registres factuels et densité utile */
.v26-comparison,.v26-fact-record,.v26-css-fact-sheet{padding:clamp(42px,6vw,82px) 0;border-bottom:1px solid #ded9cf}
.v26-compare-table{overflow-x:auto}.v26-compare-table table{width:100%;min-width:760px;border-collapse:collapse;background:#fff}.v26-compare-table caption{padding:12px;text-align:left;color:#625d54}.v26-compare-table th,.v26-compare-table td{padding:13px;border:1px solid #d8d3ca;text-align:left}.v26-compare-table th a{display:flex;gap:10px;align-items:center;color:#111}.v26-compare-table i{width:28px;height:28px;border:1px solid #aaa;background:var(--compare)}
.v26-fact-record{display:grid;grid-template-columns:1fr 1fr;gap:28px}.v26-fact-record h2,.v26-css-fact-sheet h2{margin:.3rem 0 .8rem;font:500 clamp(1.9rem,3.4vw,3.15rem)/1.04 var(--font-display,Georgia,serif)}.v26-fact-record p{line-height:1.7}.v26-fact-record dl,.v26-css-fact-sheet dl{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid #d8d3ca}.v26-fact-record dl div,.v26-css-fact-sheet dl div{padding:16px;border:1px solid #e3ded4}.v26-fact-record dt,.v26-css-fact-sheet dt{font:700 .68rem/1.2 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}.v26-fact-record dd,.v26-css-fact-sheet dd{margin:.55rem 0 0;line-height:1.45}
.v26-css-fact-sheet dl{grid-template-columns:repeat(4,1fr)}.v26-css-neighbors{grid-template-columns:repeat(3,minmax(0,1fr))}.v26-qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.v26-qa-grid article{padding:22px;border:1px solid #d8d3ca;background:#fff}.v26-qa-grid h3{margin:0 0 .7rem;font:700 1.2rem/1.15 var(--font-display,Georgia,serif)}.v26-qa-grid p{line-height:1.65}.v26-checklist{display:grid;gap:8px;padding:0;counter-reset:check}.v26-checklist li{display:grid;grid-template-columns:42px 1fr;align-items:center;padding:12px;border:1px solid #d8d3ca;list-style:none}.v26-checklist li:before{counter-increment:check;content:counter(check);font:800 1rem/1 monospace;color:#9b7622}.v26-download-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}.v26-download-grid a{display:flex;padding:18px;border:1px solid #d8d3ca;background:#fff;color:#111;flex-direction:column}.v26-download-grid span{margin-top:.45rem;color:#625d54}
@media(max-width:800px){.v26-fact-record{grid-template-columns:1fr}.v26-css-fact-sheet dl,.v26-qa-grid,.v26-download-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.v26-fact-record dl,.v26-css-fact-sheet dl,.v26-qa-grid,.v26-download-grid,.v26-css-neighbors{grid-template-columns:1fr}}


/* V27 — profondeur des pages historiquement courtes */
.v27-depth{margin-top:clamp(28px,5vw,70px);margin-bottom:clamp(45px,7vw,95px);padding:clamp(24px,4vw,48px);border:1px solid #d8d3ca;background:#f7f5ef}
.v27-depth-heading{max-width:980px}.v27-depth-heading h2{margin:.3rem 0 .85rem;font:500 clamp(1.8rem,3.3vw,3.1rem)/1.04 var(--font-display,Georgia,serif)}.v27-depth-heading p{line-height:1.72}
.v27-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}.v27-card-grid article{padding:20px;border:1px solid #d8d3ca;background:#fff}.v27-card-grid h3{margin:0 0 .65rem;font:700 1.2rem/1.15 var(--font-display,Georgia,serif)}.v27-card-grid p,.v27-two-columns p,.v27-note{line-height:1.65}.v27-note{margin:20px 0 0;padding:14px 16px;border-left:3px solid #c69b3a;background:#fff}
.v27-two-columns{display:grid;grid-template-columns:1fr 1fr;gap:26px}.v27-next-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.v27-next-links a{padding:10px 13px;border:1px solid #aaa;background:#fff;color:#111;font-weight:700}
.v27-metric-grid{display:grid;grid-template-columns:minmax(320px,.8fr) 1.2fr;gap:28px;margin-top:24px}.v27-metric-grid dl{display:grid;grid-template-columns:1fr 1fr;margin:0}.v27-metric-grid dl div{padding:16px;border:1px solid #d8d3ca;background:#fff}.v27-metric-grid dt{font:700 .68rem/1.2 Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase}.v27-metric-grid dd{margin:.45rem 0 0;font:700 1.35rem/1 var(--font-display,Georgia,serif)}.v27-metric-grid h3{margin:0 0 .6rem;font:700 1.35rem/1.1 var(--font-display,Georgia,serif)}.v27-metric-grid p{line-height:1.65}
.v27-letter-samples,.v27-letter-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:24px}.v27-letter-samples a{display:grid;grid-template-columns:42px 1fr;padding:10px;border:1px solid #d8d3ca;background:#fff;color:#111}.v27-letter-samples i{grid-row:1/3;width:32px;height:38px;background:var(--sample)}.v27-letter-samples code{grid-column:2;color:#625d54}.v27-letter-map{grid-template-columns:repeat(8,minmax(0,1fr))}.v27-letter-map a{display:flex;padding:12px;border:1px solid #d8d3ca;background:#fff;color:#111;flex-direction:column}.v27-letter-map strong{font:700 1.25rem/1 var(--font-display,Georgia,serif)}.v27-letter-map span{margin-top:.35rem;color:#625d54;font-size:.75rem}
@media(max-width:850px){.v27-card-grid,.v27-letter-samples{grid-template-columns:1fr 1fr}.v27-metric-grid,.v27-two-columns{grid-template-columns:1fr}.v27-letter-map{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:540px){.v27-card-grid,.v27-letter-samples{grid-template-columns:1fr}.v27-letter-map{grid-template-columns:repeat(3,minmax(0,1fr))}.v27-metric-grid dl{grid-template-columns:1fr}}


/* V28 — distinctions mesurées, décisions éditoriales et données relationnelles */
.v28-measured-distinction,.v28-css-distinction,.v28-editorial-decision{margin-top:42px;margin-bottom:42px;padding:34px;border:1px solid #d9d4ca;background:#f7f5f1;color:#101316}
.v28-heading{max-width:900px}.v28-heading h2{margin:.35rem 0 .7rem;font:700 clamp(1.75rem,3vw,3rem)/.98 var(--font-display,Georgia,serif)}.v28-heading>p:last-child{max-width:820px;line-height:1.65}
.v28-measures,.v28-decision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}.v28-measures article,.v28-decision-grid article{padding:18px;border:1px solid #d8d3ca;background:#fff}.v28-measures small{display:block;font:700 .67rem/1.2 Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#746b5d}.v28-measures strong{display:block;margin:.55rem 0;font:700 1.35rem/1 var(--font-display,Georgia,serif)}.v28-measures p,.v28-decision-grid p{margin:0;line-height:1.55}.v28-decision-grid h3{margin:0 0 .65rem;font:700 1.2rem/1.1 var(--font-display,Georgia,serif)}
.v28-neighbours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.v28-neighbours a{display:grid;grid-template-columns:42px 1fr;column-gap:10px;padding:12px;border:1px solid #d8d3ca;background:#fff;color:#101316}.v28-neighbours i{grid-row:1/3;width:38px;height:38px;background:var(--sample);border:1px solid #c9c3b8}.v28-neighbours span{grid-column:2;color:#655f55;font-size:.78rem}.v28-method-note,.v28-byline{margin:18px 0 0;padding-top:16px;border-top:1px solid #d8d3ca;line-height:1.6}
@media(max-width:780px){.v28-measured-distinction,.v28-css-distinction,.v28-editorial-decision{padding:24px 18px}.v28-measures,.v28-decision-grid,.v28-neighbours{grid-template-columns:1fr}}