/* julienjimenez.info : fiche d'identité professionnelle de Julien Jimenez.
   Design suisse d'information : grille de 12 colonnes, filets, grands chiffres, rouge signal. White mode uniquement. */

/* 1. Tokens */
:root {
  --bg: #FFFFFF;
  --surface: #F4F4F2;
  --ink: #111111;
  --muted: #5C5C5C;
  --line: #DCDCD8;
  --red: #E30613;
  --red-deep: #B8000C;
  --secondary: #111111;
  --blue: #0057B8;

  --f-display: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.125rem, 1.04rem + .35vw, 1.3125rem);
  --fs-lg: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-xl: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  --fs-hero: clamp(2.5rem, 10.4vw, 6.5rem);
  --fs-hero-2: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);
  --fs-fig: clamp(3rem, 1rem + 5.6vw, 6.25rem);
  --fs-ghost: clamp(4.5rem, 1rem + 9vw, 10.5rem);

  --gutter: 24px;
  --maxw: 1280px;
  --header: 64px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s7: 56px; --s8: 64px; --s10: 80px; --s12: 96px;
  --sec-gap: clamp(80px, 3.5rem + 4.6vw, 128px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 24px);
  background: var(--bg);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/1.6 var(--f-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
figure { margin: 0; }
blockquote { margin: 0; }
strong, b { font-weight: 700; }
time, .num, table { font-variant-numeric: tabular-nums; }
::selection { background: var(--red); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:focus-visible, .menu-btn:focus-visible { outline-offset: 4px; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* 3. Icônes : grille de 24 px, trait de 2 px, extrémités carrées */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.ico--sm { width: 18px; height: 18px; }
.sq { display: inline-block; width: 10px; height: 10px; background: var(--red); flex: none; }

/* 4. Liens de texte : soulignement rouge qui se déploie */
.u {
  text-decoration: none;
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(currentColor, currentColor);
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .4s var(--ease);
}
.u:hover, .u:focus-visible { background-size: 100% 2px, 100% 1px; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 600 1rem/1.2 var(--f-display);
  text-decoration: none;
  position: relative;
}
.arrow-link .ico { transition: transform .35s var(--ease); }
.arrow-link span { background: linear-gradient(var(--red), var(--red)) 0 100% / 0% 2px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.arrow-link:hover span, .arrow-link:focus-visible span { background-size: 100% 2px; }
.arrow-link:hover .ico, .arrow-link:focus-visible .ico { transform: translateX(4px); }

/* 5. Boutons rectangulaires, sans arrondi */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid var(--ink); border-radius: 0;
  background: #fff; color: var(--ink);
  font: 600 1rem/1 var(--f-display); letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn .ico { transition: transform .35s var(--ease); }
.btn:hover .ico, .btn:focus-visible .ico { transform: translate(3px, 0); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; }
.btn--red:hover, .btn--red:focus-visible { background: var(--ink); border-color: var(--ink); }
.btn--line:hover, .btn--line:focus-visible { background: var(--ink); color: #fff; }

/* 6. Étiquettes, numéros, notes de source */
.label {
  font: 600 var(--fs-xs)/1.3 var(--f-body);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.label--red { color: var(--red); }
.fn {
  font: 600 .72em/1 var(--f-body);
  color: var(--blue);
  text-decoration: none;
  padding: 0 1px;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fn:hover, .fn:focus-visible { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
sup { font-size: .68em; line-height: 0; vertical-align: super; }
.fns { font-size: 1em; vertical-align: baseline; }
[tabindex="-1"]:focus { outline: none; }

/* 7. En-tête fixe */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hdr { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  font: 700 1.125rem/1 var(--f-display); letter-spacing: -.015em;
  text-decoration: none; white-space: nowrap;
}
.logo-sq { width: 14px; height: 14px; background: var(--red); flex: none; transition: transform .4s var(--ease); }
.logo:hover .logo-sq { transform: rotate(90deg); }
.logo-tag { color: var(--muted); font-weight: 500; }
.nav { display: none; align-self: stretch; position: relative; }
.nav ul { list-style: none; display: flex; gap: clamp(18px, 2vw, 30px); height: 100%; position: relative; }
.nav li { display: flex; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 7px;
  font: 500 .9375rem/1 var(--f-display); text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.nav a .n { font: 600 var(--fs-2xs)/1 var(--f-body); color: var(--muted); letter-spacing: .04em; font-variant-numeric: tabular-nums; transition: color .3s; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active .n { color: var(--red); }
.nav-ind {
  position: absolute; bottom: -1px; left: 0; width: 0; height: 2px; background: var(--red);
  opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.nav-ind.on { opacity: 1; }
.hdr-actions { display: flex; align-items: center; gap: 6px; }
.hdr-link {
  display: none; align-items: center; min-height: 44px; padding: 0 12px;
  font: 600 .9375rem/1 var(--f-display); text-decoration: none; position: relative;
}
.hdr-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hdr-link:hover::after, .hdr-link[aria-current]::after { transform: scaleX(1); }
.hdr-cta {
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 2px solid var(--ink); font: 600 .9375rem/1 var(--f-display); text-decoration: none;
  transition: background-color .25s, color .25s;
}
.hdr-cta:hover, .hdr-cta:focus-visible { background: var(--ink); color: #fff; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px;
  background: #fff; border: 2px solid var(--ink); border-radius: 0;
  font: 600 .9375rem/1 var(--f-display); cursor: pointer;
}
.menu-btn .bars { width: 16px; height: 10px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; }
.menu-btn:hover { background: var(--ink); color: #fff; }

/* Panneau de menu plein écran (mobile et tablette) */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.menu[hidden] { display: none; }
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s; }
.menu-top { flex: none; height: var(--header); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.menu-body { flex: 1; padding: 8px 0 32px; }
.menu-list { list-style: none; }
.menu-list a {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font: 700 clamp(1.375rem, 5.4vw, 2.125rem)/1.15 var(--f-display); letter-spacing: -.02em;
  text-decoration: none;
}
.menu-list .n { font: 600 var(--fs-sm)/1 var(--f-body); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.menu-list a.is-current .n { color: var(--red); }
.menu-list a.is-current::after { content: ""; width: 12px; height: 12px; background: var(--red); align-self: center; }
.menu-list a:hover .n { color: var(--red); }
.menu-foot { margin-top: 28px; display: grid; gap: 10px; }
.menu-foot a { font-weight: 600; }

/* 8. Hero : affiche d'information */
.hero { padding: 40px 0 var(--sec-gap); position: relative; }
.hero-wrap { position: relative; isolation: isolate; padding-top: 28px; padding-bottom: 8px; }
.hero-cols {
  position: absolute; inset: 0 0 0 0; z-index: -1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  pointer-events: none;
}
.hero-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-cols span:nth-child(n+5) { display: none; }
.hero-cols span { background: rgba(220, 220, 216, .13); box-shadow: inset 1px 0 0 rgba(220, 220, 216, .5), inset -1px 0 0 rgba(220, 220, 216, .5); }
.crop { position: absolute; width: 24px; height: 24px; color: var(--ink); pointer-events: none; }
.crop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; }
.crop--tl { left: -18px; top: -18px; }
.crop--tr { right: -18px; top: -18px; transform: scaleX(-1); }
.crop--bl { left: -18px; bottom: -18px; transform: scaleY(-1); }
.crop--br { right: -18px; bottom: -18px; transform: scale(-1, -1); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta sq" "title title" "sub sub" "cta cta" "facts facts" "lead lead" "note note" "fig fig";
  column-gap: var(--gutter);
}
.hero-meta { grid-area: meta; display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.hero-meta > span { display: inline-flex; align-items: center; gap: 10px; }
.hero-idx { font: 700 var(--fs-sm)/1 var(--f-display); color: var(--ink); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hero-meta .label { color: var(--muted); font-size: var(--fs-2xs); letter-spacing: .1em; white-space: nowrap; }
.hero-title { grid-area: title; margin-bottom: 28px; }
.h1-name {
  display: block;
  font: 800 var(--fs-hero)/.92 var(--f-display);
  letter-spacing: -.045em;
  white-space: nowrap;
}
.h1-rest {
  display: block; margin-top: .45em;
  font: 700 var(--fs-hero-2)/1.06 var(--f-display);
  letter-spacing: -.025em;
  max-width: 17em;
  text-wrap: balance;
}
.hero-square {
  grid-area: sq; align-self: start;
  width: 76px; aspect-ratio: 1; background: var(--red); color: #fff;
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 8px;
}
.hs-label { font: 700 var(--fs-xs)/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.hs-arrow { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: square; }
.hero-sub { grid-area: sub; font: 400 var(--fs-md)/1.5 var(--f-body); max-width: 40em; margin-bottom: 28px; }
.hero-cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.facts { grid-area: facts; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 1fr; margin-bottom: 36px; }
.fact { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.fact dt { font: 600 var(--fs-xs)/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fact dd { font: 600 1.0625rem/1.4 var(--f-display); letter-spacing: -.005em; }
.fact dd a { font-weight: 600; word-break: break-word; }
.hero-lead { grid-area: lead; font-size: var(--fs-md); line-height: 1.55; max-width: 38em; margin-bottom: 28px; }
.hero-note { grid-area: note; border-top: 1px solid var(--ink); padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); align-self: start; }
.hero-note .label { display: flex; align-items: center; gap: 8px; color: var(--ink); margin-bottom: 8px; }
.hero-fig { grid-area: fig; margin-top: 44px; }
.hero-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; background: var(--surface); }
figcaption, .figcap {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 12px; font-size: .8125rem; line-height: 1.45; color: var(--muted);
}
figcaption b, .figcap b { font: 700 var(--fs-2xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }

/* Entrée du hero (CSS seul, le contenu reste visible sans JS) */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.hero-meta { animation: rise .7s var(--ease) both; }
.h1-name { animation: rise .9s var(--ease) both .08s; }
.h1-rest { animation: rise .9s var(--ease) both .2s; }
.hero-square { transform-origin: 0 100%; animation: grow .8s var(--ease) both .3s; }
.hero-sub { animation: rise .8s var(--ease) both .32s; }
.hero-cta { animation: rise .8s var(--ease) both .42s; }
.fact { animation: slide .6s var(--ease) both; }
.fact:nth-child(1) { animation-delay: .5s; } .fact:nth-child(2) { animation-delay: .56s; } .fact:nth-child(3) { animation-delay: .62s; }
.fact:nth-child(4) { animation-delay: .68s; } .fact:nth-child(5) { animation-delay: .74s; } .fact:nth-child(6) { animation-delay: .8s; }

/* 9. Gabarit de section */
.sec { padding-bottom: var(--sec-gap); position: relative; }
.sec-grid { border-top: 2px solid var(--ink); padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); }
.sec-head { margin-bottom: 28px; }
.sec-head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sec-meta { display: grid; gap: 6px; padding-bottom: 6px; }
.sec-tag { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 var(--fs-sm)/1 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sec-label { margin: 0; font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sec-ghost {
  font: 800 4.25rem/.8 var(--f-display); letter-spacing: -.05em;
  color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  font-variant-numeric: tabular-nums; user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) { .sec-ghost { color: var(--line); } }
.h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.03em; max-width: 23ch; margin-bottom: 24px; text-wrap: balance; }
.lead { font-size: var(--fs-md); line-height: 1.55; max-width: 40em; }
.sec-body > .lead { margin-bottom: 40px; }
.sec-intro .lead { margin-bottom: 0; }
.sec-wide { margin-top: 48px; min-width: 0; }
.h3 { font-size: var(--fs-lg); line-height: 1.15; letter-spacing: -.02em; }
.kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

/* Apparitions au défilement (état caché uniquement avec .js) */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-rows] > div > dt, .js [data-rows] > div > dd, .js [data-rows] > div > .pr-ico {
  opacity: 0; transform: translateX(-16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-rows] > div > dd { transition-delay: calc(var(--d, 0ms) + 80ms); }
.js [data-rows].is-in > div > dt, .js [data-rows].is-in > div > dd, .js [data-rows].is-in > div > .pr-ico { opacity: 1; transform: none; }

/* 10. Section 02 : qui */
.who { display: grid; grid-template-columns: minmax(0, 1fr); }
.who-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.photo { position: relative; isolation: isolate; max-width: 460px; }
.photo-frame { position: relative; background: #fff; padding: 12px; border: 1px solid var(--ink); }
.photo-frame::before { content: ""; position: absolute; left: -24px; bottom: -24px; width: 48px; height: 48px; background: var(--red); z-index: -1; }
.photo-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo figcaption { margin-top: 32px; }
.photo-links { margin-top: 12px; display: flex; flex-direction: column; }
.idcard-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.idcard-title .h3 { font-size: var(--fs-lg); }
.idcard-title .label, .pp-head .label, .undated-head .label { white-space: nowrap; }
.idcard { counter-reset: id; }
.idcard > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 13px 0 14px; border-bottom: 1px solid var(--line); counter-increment: id; }
.idcard > div::before { content: counter(id, decimal-leading-zero); grid-row: 1 / span 2; font: 600 var(--fs-sm)/1.5 var(--f-body); color: var(--red); font-variant-numeric: tabular-nums; }
.idcard dt { font: 600 var(--fs-xs)/1.5 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.idcard dd { font-size: 1.0625rem; line-height: 1.45; }
.idcard dd strong { font-family: var(--f-display); font-weight: 700; }
.who-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 72px; }
.who-col { border-top: 1px solid var(--ink); padding-top: 16px; }
.who-col .label { display: block; margin-bottom: 10px; color: var(--red); }
.who-col h3 { font-size: 1.375rem; margin-bottom: 12px; }
.sig-quote { margin-top: 72px; border-left: 4px solid var(--red); padding: 4px 0 4px clamp(20px, 3vw, 40px); }
.sig-quote p { font: 600 var(--fs-xl)/1.18 var(--f-display); letter-spacing: -.025em; max-width: 26ch; margin: 0; }
.sig-quote footer { margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); }
.sig-quote footer strong { color: var(--ink); }

/* 11. Section 03 : chiffres */
.figs { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.fig-cell { position: relative; padding: 22px 0 28px; border-bottom: 1px solid var(--line); min-width: 0; }
.fig-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.fig-idx { font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fig-num {
  margin: 0; display: flex; align-items: flex-start;
  font: 800 var(--fs-fig)/.9 var(--f-display); letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fig-plus { color: var(--red); font-size: .5em; line-height: 1; margin-right: .08em; margin-top: .06em; letter-spacing: 0; }
.fig-unit { margin: 12px 0 10px; font: 700 var(--fs-xs)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.fig-label { margin: 0; max-width: 30ch; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.figs-note { margin-top: 20px; font-size: var(--fs-sm); color: var(--muted); max-width: 60em; }

/* 12. Section 04 : domaines (table codée) */
.codes { width: 100%; border-collapse: collapse; }
.codes caption { text-align: left; }
.codes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.codes tbody th {
  text-align: left; padding: 30px 0 12px; border-bottom: 2px solid var(--ink);
  font: 700 var(--fs-lg)/1.1 var(--f-display); letter-spacing: -.02em;
}
.codes tbody:first-of-type th { padding-top: 0; }
.fam { display: flex; align-items: center; gap: 14px; }
.fam-code { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: #fff; font: 700 1rem/1 var(--f-display); flex: none; }
.fam-count { margin-left: auto; white-space: nowrap; font: 600 var(--fs-xs)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.codes td { vertical-align: top; padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.codes .c-code { width: 64px; font: 700 var(--fs-sm)/1.55 var(--f-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.codes .c-name { width: 32%; padding-right: 20px; font: 700 1.0625rem/1.4 var(--f-display); letter-spacing: -.01em; }
.codes .c-def { color: #2A2A2A; }
.codes tr.is-signature td { border-bottom-color: var(--red); }
.codes tr.is-signature .c-code { color: var(--red); box-shadow: inset 4px 0 0 var(--red); padding-left: 14px; }
.codes tr.is-signature .c-name { color: var(--red); }
.sig-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font: 700 var(--fs-2xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 5px 7px; }
.codes-end { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--ink); font-size: var(--fs-md); line-height: 1.55; max-width: 44em; }

/* 13. Section 05 : frise */
.frise-hint { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.frise {
  list-style: none; position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 76%);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink) var(--line);
  padding-bottom: 18px; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
  --yr: 3.25rem; --line-y: calc(var(--yr) + 40px);
}
.frise::-webkit-scrollbar { height: 4px; }
.frise::-webkit-scrollbar-track { background: var(--line); }
.frise::-webkit-scrollbar-thumb { background: var(--ink); }
.j { position: relative; scroll-snap-align: start; padding-right: 24px; min-width: 0; }
.j::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--line-y) - 1px); height: 2px; background: var(--ink);
  transform-origin: left; z-index: 0;
}
.j .j-year { margin: 0; height: var(--yr); display: flex; align-items: flex-end; font: 800 var(--yr)/1 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.j-mark { position: relative; z-index: 1; display: block; width: 48px; height: 48px; margin: 16px 0 22px; background: var(--red); transform-origin: 50% 50%; }
.j h3 { font-size: 1.1875rem; line-height: 1.2; margin-bottom: 8px; padding-right: 4px; }
.j p { font-size: .9375rem; line-height: 1.5; color: #2A2A2A; }
.j.j--ctx .j-year { font-size: 1.5rem; color: var(--muted); letter-spacing: -.02em; padding-bottom: 4px; }
.j--ctx .j-mark { width: 18px; height: 18px; margin: 31px 0 37px; background: #fff; border: 2px solid var(--muted); }
.j--ctx h3 { color: var(--muted); font-size: 1rem; }
.j--ctx p { color: var(--muted); }
.j-ctx-tag { display: inline-block; margin-bottom: 6px; font: 700 var(--fs-2xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 6px; }
.j--now .j-mark { background: #fff; border: 2px solid var(--red); }
.js .frise .j::before { transform: scaleX(0); transition: transform .45s linear; transition-delay: calc(var(--i, 0) * 160ms); }
.js .frise .j-mark { transform: scale(0); transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + 220ms); }
.js .frise .j-year, .js .frise .j h3, .js .frise .j p, .js .frise .j-ctx-tag { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + 120ms); }
.js .frise.is-in .j::before { transform: scaleX(1); }
.js .frise.is-in .j-mark { transform: scale(1); }
.js .frise.is-in .j-year, .js .frise.is-in .j h3, .js .frise.is-in .j p, .js .frise.is-in .j-ctx-tag { opacity: 1; transform: none; }

.undated { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 64px; }
.undated-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.undated-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px dashed var(--ink); margin-bottom: 4px; }
.undated-head h3 { font-size: var(--fs-lg); }
.u-list { list-style: none; }
.u-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.u-list li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border: 2px solid var(--red); }
.u-list h4 { font-size: 1.125rem; margin-bottom: 4px; }
.u-list p { color: #2A2A2A; }

/* 14. Section 06 : méthode */
.principles { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; row-gap: 40px; }
.principle { border-top: 2px solid var(--ink); padding-top: 16px; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; }
.p-num { font: 800 2.25rem/1 var(--f-display); color: var(--red); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.principle h3 { font-size: 1.3125rem; line-height: 1.2; margin-bottom: 10px; padding-top: 4px; }
.principle p { color: #2A2A2A; }

/* 15. Section 07 : fiche pratique */
.practical-panel { background: var(--surface); padding: clamp(20px, 3.4vw, 44px); position: relative; }
.practical-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 4px; background: var(--red); }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.practical > div { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 20px; row-gap: 6px; padding: 16px 0 17px; border-bottom: 1px solid #CFCFCA; }
.practical > div:last-child { border-bottom: 0; }
.pr-ico { color: var(--ink); width: 22px; height: 22px; }
.practical dt { display: flex; align-items: center; gap: 12px; font: 600 var(--fs-xs)/1.5 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.practical dd { padding-left: 34px; }
.practical dd { font: 500 1.0625rem/1.45 var(--f-body); }
.practical dd a { font-weight: 600; word-break: break-word; }
.pp-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.no-price { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--ink); font-size: var(--fs-sm); color: #2A2A2A; }
.no-price .ico { color: var(--red); }
.pp-guide { padding: 16px 0 0; border-top: 1px solid var(--ink); }
.pp-guide p { font-size: var(--fs-sm); color: #2A2A2A; margin-bottom: 6px; }

/* 16. Section 08 : sources */
.sources { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.sources thead th { text-align: left; font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
.sources td, .sources tbody th { vertical-align: top; text-align: left; padding: 16px 16px 17px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.sources tbody th { font-weight: 400; }
.sources .s-n { width: 56px; }
.s-badge { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border: 1px solid var(--blue); color: var(--blue); font: 700 var(--fs-sm)/1 var(--f-body); font-variant-numeric: tabular-nums; }
.sources tr:target { background: linear-gradient(90deg, rgba(227, 6, 19, .06), transparent 70%); }
.sources tr:target .s-badge { background: var(--red); border-color: var(--red); color: #fff; }
.s-info { font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.s-back { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--blue); text-decoration: none; min-height: 24px; }
.s-back:hover { color: var(--red); text-decoration: underline; }
.not-claimed { margin-top: 48px; border: 2px solid var(--ink); padding: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.not-claimed h3 { font-size: var(--fs-lg); margin: 8px 0 12px; }
.not-claimed p { color: #2A2A2A; }
.not-claimed .label--red { color: var(--red); }
.nc-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.nc-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nc-list li:last-child { border-bottom: 0; }
.nc-list .ico { color: var(--red); width: 22px; height: 22px; margin-top: 2px; }
.official { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 28px; }

/* 17. Section 09 : index alphabétique */
.lex { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lex-rail { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.lex-rail::-webkit-scrollbar { display: none; }
.lex-rail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; }
.lex-rail li > * { display: grid; place-items: center; width: 34px; height: 44px; font: 700 .9375rem/1 var(--f-display); font-variant-numeric: tabular-nums; position: relative; }
.lex-rail a { text-decoration: none; color: var(--ink); }
.lex-rail span { color: #A5A5A0; font-weight: 500; }
.lex-rail a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.lex-rail a:hover::after, .lex-rail a.is-active::after { transform: scaleX(1); }
.lex-rail a.is-active { color: var(--red); }
.lex-list { columns: 1; column-gap: 48px; }
.lex-group { break-inside: avoid; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding: 16px 0 18px; border-top: 1px solid var(--line); }
.lex-letter { font: 800 2.5rem/.9 var(--f-display); letter-spacing: -.04em; }
.lex-group dl { display: grid; gap: 14px; }
.lex-group dt { font: 700 1.125rem/1.3 var(--f-display); margin-bottom: 2px; }
.lex-group dd { font-size: .9688rem; line-height: 1.5; color: #2A2A2A; }

/* 18. Section 10 : avis */
.avis-grid { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.avis { display: flex; flex-direction: column; padding: 28px 0 32px; border-bottom: 1px solid var(--line); min-width: 0; }
.avis-q { display: block; height: 56px; font: 800 5rem/1 var(--f-display); color: var(--red); margin-bottom: 14px; }
.avis blockquote p { font: 400 1.0625rem/1.6 var(--f-body); }
.avis figcaption { display: block; margin-top: auto; padding-top: 24px; }
.avis-name { display: block; font: 700 1.125rem/1.25 var(--f-display); color: var(--ink); }
.avis-role { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.avis-src { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 var(--fs-2xs)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); border-top: 1px solid var(--ink); padding-top: 10px; }
.avis-src .ico { width: 16px; height: 16px; }
.avis-foot { margin-top: 24px; font-size: var(--fs-sm); color: var(--muted); }

/* 19. Section 11 : aperçu des infos (cartes) */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px var(--gutter); }
.card { position: relative; display: flex; flex-direction: column; border-top: 2px solid var(--ink); padding-top: 14px; min-width: 0; }
.card-img { overflow: hidden; background: var(--surface); margin-bottom: 18px; order: -1; }
.card-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-img img { transform: scale(1.035); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; font-size: var(--fs-xs); color: var(--muted); }
.card-cat { font: 700 var(--fs-xs)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.card h3 { font-size: 1.375rem; line-height: 1.18; letter-spacing: -.02em; margin-bottom: 10px; }
.card p { color: #2A2A2A; font-size: .9688rem; }
.card p { margin-bottom: 20px; }
.card-link { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card:hover .card-link span { background-size: 100% 2px; }
.card:hover .card-link .ico { transform: translateX(4px); }
.cards-all { margin-top: 36px; display: flex; justify-content: flex-start; border-top: 1px solid var(--line); padding-top: 12px; }

/* 20. FAQ */
.faq { border-top: 2px solid var(--ink); counter-reset: q; }
.faq details { border-bottom: 1px solid var(--line); counter-increment: q; }
.faq summary {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: start; gap: 10px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font: 700 var(--fs-lg)/1.25 var(--f-display); letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q" counter(q); font: 700 var(--fs-sm)/1 var(--f-body); color: var(--muted); padding-top: .45em; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.faq summary:hover { color: var(--red); }
.faq summary:hover::before { color: var(--red); }
.faq-x { position: relative; width: 24px; height: 24px; margin-top: .15em; justify-self: end; transition: transform .45s var(--ease); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; background: currentColor; }
.faq-x::before { left: 0; right: 0; top: 11px; height: 2px; }
.faq-x::after { top: 0; bottom: 0; left: 11px; width: 2px; }
.faq details[open] .faq-x { transform: rotate(45deg); color: var(--red); }
.faq details[open] summary::before { color: var(--red); }
.faq-a { padding: 0 4px 24px 0; max-width: 52em; }
.faq-a p { color: #2A2A2A; line-height: 1.65; }
.faq details[open] .faq-a { animation: rise .45s var(--ease) both; }

/* 21. Section 13 : contact */
.sec--contact .sec-grid { border-top: 4px solid var(--red); }
.contact-box { position: relative; padding: 36px 0 8px; }
.contact-box .crop { color: var(--ink); }
.contact-box .crop--tl { top: 8px; left: -18px; }
.contact-box .crop--tr { top: 8px; right: -18px; }
.contact-box .crop--bl { bottom: -24px; left: -18px; }
.contact-box .crop--br { bottom: -24px; right: -18px; }
.contact-mail {
  display: inline-block; max-width: 100%;
  font: 700 clamp(2.05rem, 11.2vw, 5.9rem)/1.02 var(--f-display); letter-spacing: -.045em;
  text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0% 4px no-repeat;
  padding-bottom: 10px; transition: background-size .5s var(--ease), color .3s;
  overflow-wrap: anywhere;
}
.contact-mail span { display: inline-block; }
.contact-mail:hover, .contact-mail:focus-visible { background-size: 100% 4px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.copy-status { font-size: var(--fs-sm); font-weight: 600; color: var(--red); min-height: 1.4em; display: inline-flex; align-items: center; gap: 6px; }
.contact-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 48px; border-top: 2px solid var(--ink); }
.contact-facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
.contact-facts dt { font: 600 var(--fs-xs)/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-facts dd { font: 600 1.0625rem/1.4 var(--f-display); }
.contact-note { margin-top: 28px; font-size: var(--fs-md); max-width: 40em; }

/* 22. Pied de page */
.site-footer { background: var(--surface); border-top: 2px solid var(--ink); padding: 56px 0 88px; font-size: .9375rem; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ft-about p { color: #2A2A2A; max-width: 34em; }
.ft-about .logo { margin-bottom: 12px; }
.ft-upd { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.ft-col h2 { font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.ft-col ul { list-style: none; display: grid; gap: 2px; }
.ft-col li a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 32px; padding: 4px 0; text-decoration: none; }
.ft-col li a .n { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 18px; }
.ft-col li a:hover { color: var(--red); }
.ft-mail { font: 700 1.0625rem/1.3 var(--f-display); word-break: break-word; }
.ft-net { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ft-net h2 { font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.network-links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; }
.network-links li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.network-links li::before { content: ""; width: 6px; height: 6px; background: var(--red); flex: none; }
.network-links a {
  overflow-wrap: anywhere;
  display: inline-flex; align-items: center; min-height: 36px;
  font: 600 .9375rem/1 var(--f-display); text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--red), var(--red)) 0 calc(100% - 6px) / 0% 2px no-repeat;
  transition: background-size .4s var(--ease);
}
.network-links a:hover, .network-links a:focus-visible { background-size: 100% 2px; }
.ft-legal { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.ft-legal p { margin: 0; }
.ft-legal a { color: var(--ink); }

/* Lien haut de page */
.totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 14px 0 12px;
  background: #fff; border: 2px solid var(--ink); color: var(--ink);
  font: 600 var(--fs-sm)/1 var(--f-display); text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s, background-color .2s, color .2s;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s, background-color .2s, color .2s; }
.totop:hover { background: var(--ink); color: #fff; }
.totop .tt-n { font: 700 var(--fs-2xs)/1 var(--f-body); color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.totop:hover .tt-n { color: #fff; }
.totop .tt-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 23. Page 404 */
.nf { padding: 48px 0 var(--sec-gap); }
.nf-grid { border-top: 2px solid var(--ink); padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.nf-code { margin: 8px 0 40px; font: 800 clamp(6rem, 24vw, 15rem)/.8 var(--f-display); letter-spacing: -.06em; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.nf-code em { font-style: normal; color: var(--red); -webkit-text-stroke: 0; }
.nf h1 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.03em; max-width: 16ch; margin-bottom: 20px; }
.nf-links { list-style: none; border-top: 2px solid var(--ink); margin-top: 36px; }
.nf-links li { border-bottom: 1px solid var(--line); }
.nf-links a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 16px 0; text-decoration: none; font: 700 var(--fs-lg)/1.2 var(--f-display); letter-spacing: -.015em; }
.nf-links .n { font: 600 var(--fs-sm)/1 var(--f-body); color: var(--muted); }
.nf-links a:hover { color: var(--red); }
.nf-links a:hover .ico { transform: translateX(4px); }
.nf-links .ico { transition: transform .3s var(--ease); }
.nf-links small { display: block; font: 400 var(--fs-sm)/1.4 var(--f-body); color: var(--muted); letter-spacing: 0; margin-top: 4px; }

/* 24. Rubrique magazine et articles */
.crumbs { padding: 20px 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-sm); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: #A5A5A0; }
.crumbs a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--red), var(--red)) 0 100% / 0% 2px no-repeat; transition: background-size .35s var(--ease); min-height: 32px; display: inline-flex; align-items: center; }
.crumbs a:hover { background-size: 100% 2px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.mag-head { padding: 28px 0 var(--sec-gap); }
.mag-head .sec-grid { border-top-width: 2px; }
.mag-title { font: 800 clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem)/.95 var(--f-display); letter-spacing: -.045em; margin-bottom: 28px; }
.mag-title span { display: block; font-size: .42em; font-weight: 700; letter-spacing: -.02em; margin-top: .4em; color: var(--ink); }
.mag-intro { columns: 1; column-gap: var(--gutter); max-width: 62em; }
.mag-intro p { orphans: 3; widows: 3; }
.mag-list .card h2 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 10px; }
.card-read { display: inline-flex; align-items: center; gap: 6px; }

.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }

.post-head { padding: 28px 0 0; }
.post-head .sec-grid { row-gap: 0; }
.post-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.post-title { font: 800 clamp(2.125rem, 1.2rem + 3.8vw, 4.5rem)/1 var(--f-display); letter-spacing: -.04em; max-width: 20ch; margin-bottom: 24px; }
.post-chapo { font-size: var(--fs-lg); line-height: 1.45; max-width: 36em; margin-bottom: 28px; color: #222; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.post-meta > div { padding: 12px 24px 12px 0; margin-right: 24px; border-right: 1px solid var(--line); }
.post-meta > div:last-child { border-right: 0; }
.post-meta dt { font: 600 var(--fs-2xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.post-meta dd { font-weight: 600; }
.post-cover { margin-top: 36px; }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 0 var(--sec-gap); }
.toc { border-top: 2px solid var(--ink); padding-top: 14px; }
.toc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.toc ol { list-style: none; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px;
  padding: 8px 0 8px 10px; border-bottom: 1px solid var(--line);
  font-size: .875rem; line-height: 1.4; text-decoration: none; color: #2A2A2A;
  box-shadow: inset 0 0 0 0 var(--red); transition: box-shadow .3s var(--ease), color .2s;
}
.toc a::before { content: counter(t, decimal-leading-zero); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 0 var(--red); }
.toc a.is-active::before { color: var(--red); }

.prose { min-width: 0; max-width: 46rem; font-size: 1.125rem; line-height: 1.72; color: #1A1A1A; counter-reset: h2; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin-bottom: 0; }
.prose > p:first-child { font-size: var(--fs-md); line-height: 1.62; }
.prose h2 {
  counter-increment: h2;
  margin-top: 2.6em; padding-top: 14px; border-top: 2px solid var(--ink);
  font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -.025em;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
}
.prose h2::before { content: counter(h2, decimal-leading-zero) " / " attr(data-total); font: 700 var(--fs-xs)/1 var(--f-body); letter-spacing: .1em; color: var(--red); font-variant-numeric: tabular-nums; }
.prose h2:not([data-total])::before { content: counter(h2, decimal-leading-zero); }
.prose h3 { margin-top: 1.9em; font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.015em; }
.prose h2 + p, .prose h3 + p { margin-top: .7em; }
.prose a { text-decoration: none; background-image: linear-gradient(var(--red), var(--red)), linear-gradient(currentColor, currentColor); background-size: 0% 2px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; padding-bottom: 1px; transition: background-size .4s var(--ease); font-weight: 500; }
.prose a:hover { background-size: 100% 2px, 100% 1px; }
.prose ul, .prose ol { padding: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li + li, .prose ol li + li { margin-top: .5em; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--red); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; position: relative; padding-left: 40px; }
.prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0; font: 700 .9375rem/1.85 var(--f-display); color: var(--red); font-variant-numeric: tabular-nums; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose blockquote { border-left: 4px solid var(--red); padding: 4px 0 4px 24px; font: 600 var(--fs-lg)/1.35 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.prose blockquote footer, .prose blockquote cite { display: block; margin-top: 10px; font: 400 var(--fs-sm)/1.4 var(--f-body); font-style: normal; color: var(--muted); letter-spacing: 0; }
.table-wrap { overflow-x: auto; margin-inline: 0; border-top: 2px solid var(--ink); }
.prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.prose caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.prose thead th { font: 600 var(--fs-xs)/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
.prose tbody th { font-family: var(--f-display); font-weight: 700; color: var(--ink); }

.callout { position: relative; background: var(--surface); padding: 22px 24px 22px 24px; font-size: 1rem; line-height: 1.6; border-top: 4px solid var(--ink); }
.callout > * + * { margin-top: .7em; }
.callout-title { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-xs)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.callout-title .ico { width: 20px; height: 20px; }
.callout--tip { border-top-color: var(--blue); }
.callout--tip .callout-title { color: var(--blue); }
.callout--key { border-top-color: var(--red); }
.callout--key .callout-title { color: var(--red); }
.callout--error { background: #fff; border: 1px solid var(--ink); border-top: 4px solid var(--ink); }
.callout--error .callout-title .ico { color: var(--red); }

.approach { position: relative; border: 2px solid var(--ink); padding: 28px clamp(20px, 3vw, 32px) 26px; background: #fff; }
.approach::before { content: ""; position: absolute; top: -2px; left: -2px; width: 48px; height: 48px; background: var(--red); }
.approach-title { position: relative; padding-left: 64px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 14px; }
.approach-title .label { color: var(--red); }
.approach-title strong { font: 700 var(--fs-lg)/1.15 var(--f-display); letter-spacing: -.02em; }
.approach > * + * { margin-top: .8em; }

.checklist { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.prose .checklist li, .checklist li { padding: 12px 0 12px 38px; position: relative; border-bottom: 1px solid var(--line); margin: 0; }
.prose .checklist li::before, .checklist li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 20px; height: 20px; border: 2px solid var(--ink); background: #fff; }
.prose .checklist li::after, .checklist li::after { content: ""; position: absolute; left: 8px; top: 18px; width: 7px; height: 11px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); }

.post-faq { margin-top: 2.6em; }
.post-faq .faq summary { font-size: 1.1875rem; }
.post-faq .faq-a { padding-left: 58px; padding-right: 8px; }

.author { margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 22px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.author-photo { padding: 6px; border: 1px solid var(--ink); background: #fff; position: relative; }
.author-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.author-photo::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 20px; height: 20px; background: var(--red); z-index: -1; }
.author { isolation: isolate; }
.author-name { font: 700 1.25rem/1.2 var(--f-display); margin: 6px 0 10px; }
.author .label { font-size: var(--fs-xs); }
.author p { font-size: .9688rem; line-height: 1.6; color: #2A2A2A; }
.author-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 10px; }

.related { padding: 0 0 var(--sec-gap); }
.related .cards { margin-top: 8px; }
.related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 2px solid var(--ink); padding-top: 18px; margin-bottom: 28px; }
.related-head h2 { font-size: var(--fs-xl); letter-spacing: -.025em; }

/* 24 bis. Lecture longue : couverture, FAQ, modèle d'e-mail, tableaux empilés */
.mag-facts { margin-top: 40px; }
.post-cover figcaption span { max-width: 34em; }
.post-faq > h2 { margin-top: 0; }
.post-faq .faq { margin-top: 1.1em; }
.prose .btn, .prose .arrow-link { background-image: none; padding-bottom: 0; font-weight: 600; }
.prose .btn { padding: 0 22px; }
.model { background: var(--surface); border-top: 4px solid var(--red); padding: 18px clamp(16px, 3vw, 28px) 22px; }
.model-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #CFCFCA; }
.model-head .label { display: flex; align-items: center; gap: 8px; }
.model-head .lc { text-transform: none; letter-spacing: .01em; color: var(--ink); }
.model-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .9688rem/1.65 var(--f-body); color: var(--ink); }
.model-text .mk { font-weight: 700; }
.model-text .ph { color: var(--blue); background: #fff; padding: 0 2px; border-bottom: 1px dashed var(--blue); }
.model-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 22px; }
.card--fiche { background: var(--surface); padding: 16px 20px 20px; border-top-color: var(--red); }
.card--fiche .card-cat { margin-bottom: 12px; }
@media (max-width: 639.98px) {
  .table-wrap { overflow: visible; }
  .prose .t-stack { min-width: 0; }
  .prose .t-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose .t-stack tbody, .prose .t-stack tr, .prose .t-stack th, .prose .t-stack td { display: block; }
  .prose .t-stack { display: flex; flex-direction: column; }
  .prose .t-stack caption { display: block; order: 1; padding-top: 12px; }
  .post-meta > div { padding-right: 14px; margin-right: 14px; }
  .author { grid-template-columns: 72px minmax(0, 1fr); column-gap: 18px; row-gap: 0; }
  .author-body { display: contents; }
  .author-photo { grid-row: 1 / span 2; align-self: start; }
  .author .label, .author-name { grid-column: 2; }
  .author .label { align-self: end; }
  .author-bio, .author-links { grid-column: 1 / -1; }
  .author-bio { margin-top: 18px; }
  .prose .t-stack tr { padding: 12px 0 10px; border-bottom: 1px solid var(--line); }
  .prose .t-stack th, .prose .t-stack td { padding: 0 0 4px; border: 0; }
  .prose .t-stack td::before { content: attr(data-label); display: block; margin-top: 8px; font: 600 var(--fs-2xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .post-faq .faq-a { padding-left: 50px; }
}
@media (min-width: 900px) {
  .post-cover { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .post-cover img { grid-column: 4 / -1; grid-row: 1; }
  .post-cover figcaption { grid-column: 1 / span 3; grid-row: 1; align-self: end; flex-direction: column; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ink); }
}

/* 25. Responsive */
@media (min-width: 560px) {
  .hero-meta { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
  .hero-square { width: 104px; padding: 10px; }
  .photo-links { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig-cell { padding-right: 20px; }
  .fig-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .fig-cell:nth-child(even) { padding-left: 20px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-about { grid-column: 1 / -1; }
  .contact-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
  .nc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .nc-list li:nth-last-child(2) { border-bottom: 0; }
}

@media (min-width: 640px) {
  .network-links { display: flex; flex-wrap: wrap; gap: 4px 0; }
  .network-links li::before { display: none; }
  .network-links li + li::before { display: block; content: ""; width: 1px; height: 14px; background: #BDBDB8; margin: 0 16px; }
  .hdr-link, .hdr-cta { display: inline-flex; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: 48px; }
  .idcard > div { grid-template-columns: 40px 11rem minmax(0, 1fr); }
  .idcard > div::before { grid-row: auto; }
  .idcard dt { padding-top: 2px; }
  .practical > div { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .practical dd { padding-left: 0; }
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lex-list { columns: 2; }
  .faq summary { grid-template-columns: 48px minmax(0, 1fr) 32px; }
  .faq-a { padding: 0 42px 26px 58px; }
  .contact-facts > div { padding-right: 16px; }
  .post-meta > div { padding-right: 32px; margin-right: 32px; }
  .author { grid-template-columns: 140px minmax(0, 1fr); gap: 28px; }
}

@media (min-width: 900px) {
  .hero { padding-top: 56px; }
  .hero-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-cols span:nth-child(n+5) { display: block; }
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
  }
  .hero-meta { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 44px; }
  .hero-title { grid-column: 1 / span 9; grid-row: 2; margin-bottom: 32px; }
  .hero-square { grid-column: 10 / span 3; grid-row: 2 / span 3; width: 100%; padding: 16px; }
  .hs-label { font-size: var(--fs-sm); }
  .hs-arrow { width: 32px; height: 32px; }
  .hero-sub { grid-column: 1 / span 7; grid-row: 3; }
  .hero-cta { grid-column: 1 / span 9; grid-row: 4; margin-bottom: 56px; }
  .facts { grid-column: 1 / -1; grid-row: 5; margin-bottom: 40px; }
  .hero-lead { grid-column: 1 / span 7; grid-row: 6; margin-bottom: 0; }
  .hero-note { grid-column: 9 / span 4; grid-row: 6; }
  .hero-fig { grid-column: 1 / -1; grid-row: 7; margin-top: 56px; }
  .hero-fig img { aspect-ratio: 16 / 6; }

  .sec-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 24px; }
  .sec-head { grid-column: 1 / span 3; margin-bottom: 0; }
  .sec-head-in { display: block; position: sticky; top: calc(var(--header) + 32px); }
  .sec--top .sec-head-in { position: static; }
  .sec-meta { padding-bottom: 0; }
  .sec-ghost { display: block; margin-top: 28px; font-size: var(--fs-ghost); }
  .sec--top .sec-ghost { font-size: clamp(4.5rem, 1rem + 6vw, 7.5rem); margin-top: 22px; }
  .sec-body, .sec-intro { grid-column: 4 / -1; min-width: 0; }
  .sec-wide { grid-column: 1 / -1; margin-top: 64px; }

  .who { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .who-top { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; }
  .photo { grid-column: 1 / span 4; max-width: none; align-self: start; }
  .idcard-wrap { grid-column: 5 / -1; padding-left: clamp(0px, 2vw, 32px); }
  .who-cols { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 80px; }
  .sig-quote { grid-column: 4 / -1; margin-top: 80px; }

  .figs { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fig-cell { padding: 26px 24px 32px; border-right: 1px solid var(--line); }
  .fig-cell:nth-child(even) { padding-left: 24px; }
  .fig-cell:nth-child(1), .fig-cell:nth-child(2), .fig-cell:nth-child(3) { grid-column: span 4; }
  .fig-cell:nth-child(4) { grid-column: span 4; }
  .fig-cell:nth-child(5) { grid-column: span 5; }
  .fig-cell:nth-child(6) { grid-column: span 3; }
  .fig-cell:nth-child(1), .fig-cell:nth-child(4) { padding-left: 0; }
  .fig-cell:nth-child(3), .fig-cell:nth-child(6) { border-right: 0; }
  .fig-cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .fig-cell:nth-child(3) { border-right: 0; }

  .frise { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; grid-auto-columns: minmax(232px, 30%); }
  .undated { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 88px; }
  .undated-fig { grid-column: 1 / span 4; }
  .undated-body { grid-column: 5 / -1; padding-left: clamp(0px, 2vw, 32px); }

  .principles { row-gap: 48px; column-gap: 56px; }

  .sources .s-info { width: 30%; }
  .not-claimed { grid-template-columns: 4fr 8fr; gap: 32px; align-items: start; }

  .lex { grid-template-columns: 44px minmax(0, 1fr); gap: 32px; }
  .lex-rail { border-bottom: 0; padding-bottom: 0; }
  .lex-rail ol { flex-wrap: nowrap; }
  .lex-rail ol { flex-direction: column; gap: 0; position: sticky; top: calc(var(--header) + 32px); }
  .lex-rail li > * { width: 40px; height: 26px; justify-items: start; padding-left: 4px; font-size: .875rem; }
  .lex-rail a::after { left: 4px; right: auto; width: 18px; bottom: 2px; }

  .avis-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .avis { padding: 8px 32px 4px; border-bottom: 0; border-left: 1px solid var(--line); }
  .avis:first-child { padding-left: 0; border-left: 0; }
  .avis:last-child { padding-right: 0; }

  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-all { justify-content: flex-end; }

  .ft-grid { grid-template-columns: 5fr 3fr 3fr 3fr; gap: var(--gutter); }
  .ft-about { grid-column: auto; padding-right: 40px; }
  .ft-net { grid-template-columns: 3fr 11fr; }
  .ft-legal { grid-template-columns: 8fr 4fr; gap: var(--gutter); }
  .ft-legal p:last-child { text-align: right; }

  .nf-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .nf-grid .sec-head { grid-column: 1 / span 3; }
  .nf-main { grid-column: 4 / -1; }

  .mag-intro { columns: 2; }
  .post-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .post-head-main { grid-column: 4 / -1; }
  .toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header) + 24px); max-height: calc(100vh - var(--header) - 48px); overflow: auto; }
  .prose { grid-column: 4 / span 8; }
}

@media (min-width: 1024px) {
  .fact { grid-template-columns: 11.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
}

@media (min-width: 1100px) {
  .nav { display: block; }
  .menu-btn { display: none; }
  .hdr { gap: 32px; }
}

@media (min-width: 1180px) {
  .frise { grid-auto-flow: row; grid-template-columns: 1fr 1fr 1fr .78fr 1fr .78fr 1fr; overflow: visible; scroll-snap-type: none; padding-bottom: 0; --yr: clamp(2.25rem, 1rem + 2.1vw, 3.25rem); }
  .frise-hint { display: none; }
  .j { padding-right: 20px; }
}

@media (min-width: 1280px) {
  .avis { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 899.98px) {
  .sec--top .sec-wide { margin-top: 36px; }
  .codes, .codes tbody, .codes tr, .codes td, .codes th { display: block; width: auto; }
  .codes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .codes tbody th { padding-top: 32px; }
  .codes tr:not(.fam-row) { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 14px 0 15px; border-bottom: 1px solid var(--line); }
  .codes tr:not(.fam-row) td { border: 0; padding: 0; }
  .codes .c-code { grid-row: 1 / span 2; width: auto; }
  .codes .c-name { width: auto; padding-right: 0; margin-bottom: 4px; }
  .codes tr.is-signature { border-bottom-color: var(--red); box-shadow: inset 4px 0 0 var(--red); padding-left: 12px; }
  .codes tr.is-signature .c-code { box-shadow: none; padding-left: 0; }
  .sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sources, .sources tbody, .sources tr, .sources td, .sources tbody th { display: block; width: auto; }
  .sources tr { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--line); }
  .sources tr > * { grid-column: 2; border: 0; padding: 0 0 6px; }
  .sources tr > .s-n { grid-column: 1; grid-row: 1 / span 3; }
  .sources td[data-label]::before { content: attr(data-label); display: block; font: 600 var(--fs-2xs)/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
  .sources tbody { border-top: 2px solid var(--ink); }
  .avis:first-child { padding-top: 20px; }
}

@media (max-width: 559.98px) {
  .copy-status { flex: 1 0 100%; }
  .hero-cta .btn, .contact-actions .btn { flex: 1 1 200px; }
}

@media (max-width: 380px) {
  .wrap { width: calc(100% - 40px); }
  .frise { margin-inline: -20px; padding-inline: 20px; }
  .hero-square { width: 64px; }
  .hs-arrow { display: none; }
  .btn { padding: 0 16px; }
  .logo { font-size: 1rem; }
}

/* 26. Mouvement réduit : tout est affiché immédiatement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js [data-rows] > div > dt, .js [data-rows] > div > dd, .js [data-rows] > div > .pr-ico { opacity: 1; transform: none; }
  .js .frise .j::before, .js .frise .j-mark { transform: none; }
  .js .frise .j-year, .js .frise .j h3, .js .frise .j p, .js .frise .j-ctx-tag { opacity: 1; transform: none; }
  .card:hover .card-img img { transform: none; }
}

/* 27. Impression : la fiche reste lisible sur papier */
@media print {
  .site-header, .menu, .totop, .hero-cols, .crop, .progress, .contact-actions { display: none !important; }
  .sec { padding-bottom: 32px; break-inside: auto; }
  .sec-head-in, .photo, .toc { position: static !important; }
  a { text-decoration: underline; background: none !important; }
}
.nf-facts { grid-template-rows: repeat(2, auto); margin: 36px 0 0; }