/* ==========================================================================
   Philippe Nijean — Le deuxième chiffre d'affaires
   Direction artistique : « Papier & encre »
   Fond statique (aucune animation de fond), grain papier, or en filet.
   ========================================================================== */

:root {
  /* Encres */
  --paper:      #FAF8F4;
  --surface:    #FFFDFA;
  --ink:        #16203A;
  --ink-2:      #4A5468;
  --muted:      #8A8577;
  --rule:       #E4DFD3;
  --rule-soft:  #EFEBE2;

  /* Accents */
  --gold:       #A8823A;
  --gold-soft:  #D9C79A;
  --gold-wash:  rgba(168, 130, 58, .10);
  --blue:       #2E4372;
  --blue-2:     #1C2C50;
  --blue-wash:  rgba(46, 67, 114, .08);

  /* Mouvement */
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --ease-2: cubic-bezier(.4, 0, .2, 1);

  /* Structure */
  --nav-h: 68px;
  --gut:   clamp(1.25rem, 5vw, 3.5rem);
  --maxw:  1200px;
  --panels: 7;

  --shadow:      0 1px 2px rgba(22, 33, 64, .03);
  --shadow-lift: 0 1px 2px rgba(22, 33, 64, .04), 0 14px 34px rgba(22, 33, 64, .07);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  letter-spacing: -.009em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Fond : deux couches fixes, statiques, sans filtre ------------------- */
/* Lavis très doux. Aucun blur, aucune animation : zéro repaint au scroll.   */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58vw 48vw at 88% 6%,  var(--gold-wash), transparent 62%),
    radial-gradient(52vw 44vw at 4% 92%,  var(--blue-wash), transparent 62%);
}
/* Grain papier : une image rasterisée une seule fois. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Typographie -------------------------------------------------------- */
h1, h2, h3 {
  margin: 0;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -.014em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.display  { font-size: clamp(2.1rem, 4.4vw, 3.55rem); }
.display .second { display: block; color: var(--blue); font-style: italic; font-weight: 500; }
.h2       { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.h3       { font-size: 1.16rem; letter-spacing: -.01em; }

p { margin: 0; }
.lead {
  font-size: clamp(1.04rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.soft  { color: var(--ink-2); }
.muted { color: var(--muted); }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Le mot pivot : filet or sous le texte, jamais un aplat de surlignage. */
.mark {
  color: var(--ink);
  box-shadow: inset 0 -.34em 0 var(--gold-wash), inset 0 -.38em 0 -.33em var(--gold);
  padding: 0 .06em;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .715rem;
  font-weight: 400;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

a { color: var(--blue); text-decoration: none; }
.link {
  color: var(--blue);
  font-weight: 500;
  font-size: .97rem;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  transition: gap .28s var(--ease), color .2s;
}
.link .arw { transition: transform .28s var(--ease); }
.link:hover { color: var(--blue-2); }
.link:hover .arw { transform: translateX(.22rem); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: inherit;
  font-weight: 500;
  font-size: .97rem;
  padding: .84rem 1.6rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .22s var(--ease-2), box-shadow .22s var(--ease-2);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(28, 44, 80, .2);
}
.btn-primary:hover { background: var(--blue-2); box-shadow: 0 6px 18px rgba(28, 44, 80, .22); }
.btn[disabled] { opacity: .55; cursor: default; }

/* --- Barre de navigation ------------------------------------------------ */
header.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
header.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wordmark .surname { font-family: 'JetBrains Mono', monospace; font-size: .82rem; letter-spacing: .1em; color: var(--ink-2); }
.logo { height: 26px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a {
  color: var(--ink-2);
  font-size: .89rem;
  font-weight: 500;
  transition: color .2s;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.42rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); }
.nav-links a.on::after { transform: scaleX(1); }

.burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  cursor: pointer; padding: 0;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
  transition: transform .28s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 49;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: .5rem var(--gut) 1.4rem;
  display: none;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: .82rem 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 500;
  border-bottom: 1px solid var(--rule-soft);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* --- Repères de lecture -------------------------------------------------- */
.hbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 60;
}
.chapter, .hint {
  position: fixed;
  bottom: 1.5rem;
  z-index: 40;
  font-family: 'JetBrains Mono', monospace;
  font-size: .715rem;
  letter-spacing: .09em;
  color: var(--muted);
}
.chapter { left: var(--gut); }
.chapter b { color: var(--gold); font-weight: 400; }
.hint { right: var(--gut); transition: opacity .4s; }

/* --- Le deck ------------------------------------------------------------- */
.deck { position: relative; height: calc(var(--panels) * 100vh); }
.deck-viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1900px; }
.deck-track { display: flex; height: 100vh; will-change: transform; transform-style: preserve-3d; }
.panel { flex: 0 0 100vw; height: 100vh; transform-style: preserve-3d; }
.panel-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 2rem) var(--gut) 4.5rem;
}

/* Marques de calage pour le scroll-snap (invisibles). */
.snap-marks { position: absolute; inset: 0; pointer-events: none; }
.snap-mark  { position: absolute; left: 0; width: 1px; height: 100vh; }

/* Grille éditoriale : corps à gauche, marginalia à droite. */
.spread {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.spread.wide { grid-template-columns: 1fr; }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.05rem; }

/* --- Portrait ------------------------------------------------------------ */
/* La photo est détourée : les côtés et le haut sont déjà transparents.
   Seul le bas pose problème, la veste y est coupée net par le cadre.
   Un fondu vertical la dissout dans le papier au lieu de la guillotiner.   */
.portrait { position: relative; }

/* Sur grand écran, la colonne de droite ne faisait que 4/11 de la largeur :
   le portrait tombait autour de 430 px et paraissait minuscule à côté du
   titre. On lui donne 5/11 et on le laisse monter en hauteur, borné par le
   panneau pour ne jamais déborder. En dessous de 901 px la mise en page
   passe sur une colonne et cette règle ne s'applique plus.                 */
@media (min-width: 901px) {
  #p-hero .spread { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  #p-hero .portrait img {
    width: auto;
    max-width: 100%;
    max-height: min(72vh, 820px);
    margin-inline-start: auto;
  }
}
@media (min-width: 901px) and (max-height: 880px) {
  #p-hero .portrait img { max-height: 66vh; }
}
@media (min-width: 901px) and (max-height: 770px) {
  #p-hero .portrait img { max-height: 60vh; }
}

.portrait img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.04) sepia(.16) brightness(1.02);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.5) 84%, transparent 100%);
}

/* --- Le registre (marginalia du manifeste) ------------------------------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--muted);
  padding-top: .18rem;
}
.ledger-row b { display: block; font-weight: 600; font-size: .97rem; color: var(--ink); }
.ledger-row p { font-size: .9rem; color: var(--ink-2); margin-top: .25rem; }
.ledger-row.dormant .ledger-num { color: var(--gold); }
.ledger-row.dormant b { color: var(--blue); }

/* --- Signature ----------------------------------------------------------- */
.signature { text-align: right; }
.signature .sig-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.signature .sig-name {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: var(--blue);
  margin-top: .3rem;
}
.signature .sig-rule { width: 4.5rem; height: 1px; background: var(--gold); margin: 1.1rem 0 0 auto; }

/* --- Cartes -------------------------------------------------------------- */
.grid-cards { display: grid; gap: 1.15rem; margin-top: 2.3rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }

.card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem 1.6rem 1.55rem;
  box-shadow: var(--shadow);
  transition: border-color .25s var(--ease-2), box-shadow .25s var(--ease-2), transform .25s var(--ease-2);
}
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .38s var(--ease);
}
a.card:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.card:hover::before { width: calc(100% + 2px); }

.card .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .69rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card .name {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.012em;
  margin-top: .55rem;
  color: var(--ink);
}
.card .via {
  font-family: 'JetBrains Mono', monospace;
  font-size: .69rem;
  letter-spacing: .07em;
  color: var(--gold);
  margin-top: .3rem;
}
.card .what { color: var(--ink-2); margin-top: .7rem; font-size: .95rem; line-height: 1.55; }
.card .more { margin-top: 1.15rem; }

/* Cartes du journal : titre en serif, plus haut */
.card-art .name { font-size: 1.12rem; line-height: 1.28; margin-top: .6rem; }

/* --- Preuve de méthode --------------------------------------------------- */
.proof { margin-top: 1.9rem; border-top: 1px solid var(--rule); }
.proof li {
  list-style: none;
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.proof { padding-left: 0; }
.proof li .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--gold);
  padding-top: .28rem;
}
/* Le libellé prend sa propre ligne : sans ça, tout se lit d'un bloc. */
.proof li b { display: block; font-weight: 600; color: var(--ink); margin-bottom: .22rem; }
.proof li span.t { display: block; color: var(--ink-2); font-size: .97rem; }

/* Les quatre méthodes nommées, une par ligne, alignées sur leur capital. */
.methods { display: block; margin-top: .5rem; }
.methods span {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: .55rem;
  align-items: baseline;
  padding: .2rem 0;
  font-size: .9rem;
  color: var(--muted);
}
.methods em {
  font-style: normal;
  font-family: 'Spectral', Georgia, serif;
  font-size: .99rem;
  color: var(--ink);
  white-space: nowrap;
}
.methods sup { font-size: .62em; }
@media (max-width: 520px) {
  .methods span { grid-template-columns: 1fr; gap: .1rem; }
  .methods em { white-space: normal; }
}

.caveat {
  border-left: 2px solid var(--gold);
  padding: .2rem 0 .2rem 1.1rem;
  font-size: .95rem;
  color: var(--ink-2);
}
.caveat b { color: var(--ink); font-weight: 600; }

/* --- Formulaire ---------------------------------------------------------- */
form { display: grid; gap: 1rem; max-width: 32rem; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
form label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .4rem;
}
form input, form textarea, form select {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 4px;
  padding: .78rem .9rem;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
form input:focus, form textarea:focus, form select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-wash);
}
form textarea { resize: vertical; min-height: 96px; }
.form-note { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--muted); }
.form-status { font-size: .93rem; margin-top: .2rem; min-height: 1.2em; }
.form-status.ok  { color: var(--blue); }
.form-status.err { color: #A03A2E; }

/* --- Coordonnées / pied -------------------------------------------------- */
.coords { border-top: 1px solid var(--rule); }
.coords div {
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.coords .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .28rem;
}
.coords .val { color: var(--ink); font-size: .97rem; }

.foot-mini {
  font-family: 'JetBrains Mono', monospace;
  font-size: .715rem;
  color: var(--muted);
  margin-top: 2.4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.foot-mini a { color: var(--ink-2); }
.foot-mini a:hover { color: var(--gold); }

/* --- Accessibilité ------------------------------------------------------- */
a.skip {
  position: fixed; left: -999px; top: .5rem;
  background: var(--ink); color: #fff;
  padding: .6rem 1rem; border-radius: 4px; z-index: 100;
}
a.skip:focus { left: .5rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* --- Calage du scroll (mode horizontal uniquement) ----------------------- */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  .snap-mark { scroll-snap-align: start; }
}

/* --- Adaptation à la HAUTEUR de l'écran ---------------------------------- */
/* Le deck impose que chaque panneau tienne dans un écran. Sur un portable
   13 pouces la hauteur utile tombe sous 720px : sans ces paliers, le texte
   passe sous les repères de lecture. On resserre, on ne rogne jamais.      */
@media (min-width: 1081px) and (max-height: 880px) {
  .panel-inner { padding-top: calc(var(--nav-h) + 1.1rem); padding-bottom: 3.5rem; }
  .display  { font-size: clamp(1.85rem, 3.5vw, 2.85rem); }
  .h2       { font-size: clamp(1.45rem, 2.5vw, 2.05rem); }
  .eyebrow  { margin-bottom: .95rem; }
  .lead     { font-size: 1.01rem; }
  .prose    { font-size: .98rem; }
  .prose p + p    { margin-top: .78rem; }
  .grid-cards     { margin-top: 1.5rem; gap: .85rem; }
  .card           { padding: 1.1rem 1.2rem 1.15rem; }
  .card .name     { font-size: 1.16rem; margin-top: .4rem; }
  .card .what     { font-size: .89rem; margin-top: .48rem; }
  .card .more     { margin-top: .75rem; }
  .proof li       { padding: .68rem 0; }
  .ledger-row     { padding: .8rem 0; }
  form            { gap: .7rem; }
  form textarea   { min-height: 66px; }
  .signature .sig-name { font-size: clamp(2.2rem, 4vw, 3rem); }
}

@media (min-width: 1081px) and (max-height: 770px) {
  .panel-inner { padding-top: calc(var(--nav-h) + .7rem); padding-bottom: 3rem; }
  .display  { font-size: clamp(1.62rem, 3vw, 2.3rem); }
  .h2       { font-size: clamp(1.28rem, 2.1vw, 1.72rem); }
  .eyebrow  { margin-bottom: .75rem; font-size: .68rem; }
  .lead     { font-size: .95rem; }
  .prose    { font-size: .92rem; line-height: 1.52; }
  .prose p + p    { margin-top: .6rem; }
  .grid-cards     { margin-top: 1.1rem; gap: .7rem; }
  .card           { padding: .88rem .98rem .92rem; }
  .card .name     { font-size: 1.02rem; }
  .card .what     { font-size: .845rem; line-height: 1.42; margin-top: .38rem; }
  .card .more     { margin-top: .6rem; }
  .card .k, .card .via { font-size: .64rem; }
  .proof li       { padding: .5rem 0; }
  .proof li span.t { font-size: .875rem; }
  .caveat         { font-size: .89rem; }
  .ledger-row     { padding: .62rem 0; }
  .ledger-row p   { font-size: .85rem; }
  form                    { gap: .58rem; }
  form textarea           { min-height: 54px; }
  form input, form textarea, form select { padding: .58rem .72rem; font-size: .94rem; }
  form label      { font-size: .64rem; margin-bottom: .28rem; }
}

/* --- Repli vertical ------------------------------------------------------ */
/* Le deck horizontal est conservé sur tout écran de bureau (>900px).
   L'empilement vertical ne concerne que tablette et mobile. Quand un panneau
   manque de hauteur, js/app.js le met à l'échelle au lieu de l'abandonner. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .deck { height: auto; }
  .deck-viewport { position: static; height: auto; overflow: visible; perspective: none; }
  .deck-track { display: block; height: auto; transform: none !important; will-change: auto; }
  .panel { flex: none; width: 100%; height: auto; }
  .panel-inner {
    height: auto;
    transform: none !important;
    opacity: 1 !important;
    padding-block: clamp(3.5rem, 9vh, 6rem);
    border-top: 1px solid var(--rule);
  }
  #p-hero .panel-inner { border-top: 0; padding-top: calc(var(--nav-h) + 2.5rem); }
  .hint, .chapter, .snap-marks { display: none; }
}

@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; gap: 2.4rem; }
  .signature { text-align: left; }
  .signature .sig-rule { margin-left: 0; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 760px) {
  .g2, .g3 { grid-template-columns: 1fr; }
  form .row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pages du journal (lecture longue)
   ========================================================================== */
.doc {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 4rem) var(--gut) 5rem;
}
.doc-narrow { max-width: 680px; }

.art-head { border-bottom: 1px solid var(--rule); padding-bottom: 2rem; margin-bottom: 2.4rem; }
.art-head h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  margin-top: .5rem;
}
.art-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .705rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.1rem;
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.art-body { font-size: 1.105rem; line-height: 1.72; color: var(--ink-2); }
.art-body p { margin-bottom: 1.25rem; max-width: 66ch; }
.art-body p:first-of-type { font-size: 1.19rem; color: var(--ink); line-height: 1.6; }
.art-body p:last-child { margin-bottom: 0; }

.art-foot {
  margin-top: 3.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.art-sign {
  font-family: 'Spectral', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--blue);
}

.j-list { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: 2.6rem; }
.j-item {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.55rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color .2s;
}
.j-item:hover { background: rgba(168, 130, 58, .045); }
.j-item .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .69rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.j-item .t {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.012em;
}
.j-item .d { color: var(--ink-2); font-size: .93rem; margin-top: .35rem; max-width: 62ch; }
.j-item .arw { color: var(--gold); transition: transform .28s var(--ease); display: inline-block; }
.j-item:hover .arw { transform: translateX(.25rem); }

@media (max-width: 760px) {
  .j-item { grid-template-columns: 1fr; gap: .45rem; }
  .j-item .arw { display: none; }
}

/* Pot de miel : invisible pour l'humain, rempli par les robots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ajustement automatique du contenu d'un panneau (piloté par js/app.js).
   Le deck horizontal est conservé à toutes les tailles de bureau : quand un
   panneau ne tient pas, il se met à l'échelle au lieu de déborder. */
.panel-inner > * { transform: scale(var(--fit, 1)); transform-origin: center center; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .panel-inner > * { transform: none !important; }
}

/* --- Bloc FAQ des articles (ce que lisent les moteurs de réponse) --------- */
.faq { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.faq h2 {
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.faq details {
  border-bottom: 1px solid var(--rule-soft);
  padding: .95rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: .7rem; color: var(--ink-2); font-size: .99rem; max-width: 62ch; }

/* --- À lire ensuite ------------------------------------------------------- */
.suite { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.suite .grid-cards { margin-top: 1.2rem; }

/* --- Corps d'article : intertitres --------------------------------------- */
.art-body h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  margin: 2.4rem 0 .9rem;
  color: var(--ink);
}
.art-body h3 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; }
.art-body ul { margin: 0 0 1.25rem; padding-left: 1.1rem; max-width: 66ch; }
.art-body li { margin-bottom: .45rem; }
.art-body li::marker { color: var(--gold); }

/* --- Liste de la page pilier ---------------------------------------------
   Le hub de la série : titre cliquable, description en dessous, sans puce.
   C'est une table des matières, pas une énumération.                       */
.art-body ul.pilier-liste { list-style: none; padding-left: 0; max-width: 68ch; }
.art-body ul.pilier-liste li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.art-body ul.pilier-liste li:last-child { border-bottom: 0; }
.art-body ul.pilier-liste a {
  display: block;
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.08rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0;
}
.art-body ul.pilier-liste a:hover { color: var(--blue); }
.art-body ul.pilier-liste .d {
  display: block;
  margin-top: .18rem;
  font-size: .95rem;
  color: var(--ink-2);
  opacity: .82;
}

/* --- Tableaux d'article --------------------------------------------------
   Un tableau porte un calcul : il doit se lire d'un coup d'œil, sans bordure
   de grille. Filets horizontaux seulement, chiffres à droite et en chasse
   fixe pour que les colonnes s'alignent visuellement. Le conteneur défile
   sur téléphone plutôt que d'élargir la page.                              */
.art-body .tableau { overflow-x: auto; margin: 1.7rem 0 1.9rem; max-width: 66ch; }
.art-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: .97rem;
  line-height: 1.45;
}
.art-body thead th {
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0 .9rem .5rem 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.art-body tbody td {
  padding: .62rem .9rem .62rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.art-body tbody tr:last-child td { border-bottom: 0; }
.art-body th.num, .art-body td.num {
  text-align: right;
  padding-right: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.art-body tbody td strong { color: var(--ink); }
.art-body blockquote {
  margin: 1.6rem 0;
  padding-left: 1.2rem;
  border-left: 2px solid var(--gold);
  font-family: 'Spectral', Georgia, serif;
  font-size: 1.16rem;
  font-style: italic;
  color: var(--ink);
  max-width: 60ch;
}
.art-body a { border-bottom: 1px solid var(--gold-soft); }
.art-body a:hover { border-bottom-color: var(--gold); }

.j-item .j-date { color: var(--rule); font-size: .64rem; letter-spacing: .06em; }