/* Base visuelle d'Insight — DÉRIVÉE, ne pas éditer à la main.
 *
 * Générée par tools/factorise-insight.py depuis
 * reference/html/insight_contact.html, seule page Insight servie en
 * statique à la charte ORBii. Les valeurs sont celles de la production.
 *
 * Le listing et le lecteur d'article ne sont PAS ici : ils n'ont pas
 * d'équivalent statique en production, donc rien à dériver. Ils sont
 * écrits dans styles/insight/listing.css, dans cette charte.
 */

:root { --ins:#9d174d; --ins-s:#fdf2f8; --ins-m:#ec4899; --ink:#1a1a1a; --ink-s:#3d3d3d; --ink-m:#6b6b6b; --ink-f:#9a9a9a; --rule:#e0ddd8; --paper:#faf9f7; --red:#b8390e; --gr:#047857 }
* { margin:0; padding:0; box-sizing:border-box }
body { font-family:'Geist',sans-serif; background:#f4f1ec; color:var(--ink-s); -webkit-font-smoothing:antialiased; min-height:100vh }
.nav { background:rgba(250,249,247,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); padding:12px 32px; display:flex; align-items:center; gap:12px }
.nav a { font-size:13px; font-weight:500; color:var(--ins); text-decoration:none; display:flex; align-items:center; gap:6px }
.nav a:hover { text-decoration:underline }
.nav .sep { font-size:12px; color:var(--ink-f) }
.nav .cur { font-size:12px; color:var(--ink-m) }
.wrap { max-width:720px; margin:0 auto; padding:48px 20px 60px }
.footer { text-align:center; padding:24px 20px; font-family:'Geist Mono',monospace; font-size:10px; color:var(--ink-f); letter-spacing:.08em }
.card { background:white; border-radius:14px; border:1px solid var(--rule); padding:32px; box-shadow:0 2px 20px rgba(0,0,0,.04); margin-bottom:16px }
.card-title { font-family:'Newsreader',serif; font-weight:700; font-size:20px; color:var(--ink); margin-bottom:4px }
.card-sub { font-size:13px; color:var(--ink-m); margin-bottom:24px; line-height:1.5 }
/* Listing et lecteur d'article — ÉCRIT, dans la charte dérivée de `base.css`.
 *
 * Ces deux pages n'ont pas d'équivalent statique en production : le listing y
 * est rendu par le SPA React, et aucun article n'y est servi à son URL. Il n'y
 * a donc rien à dériver, et pas de G1 ni de G3 à opposer — ce que le lot 7
 * vérifie est la **parité de contenu** (`tools/parite-insight.py`), pas
 * l'identité d'un rendu qui n'existe pas côté statique.
 *
 * Les valeurs reprennent les jetons de `base.css` : aucune couleur n'est
 * inventée ici, seule la mise en page l'est.
 */

.wrap-large { max-width: 1080px; margin: 0 auto; padding: 48px 20px 60px }

/* ── En-tête de section ── */

.ins-eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ins); margin-bottom: 10px;
}

.ins-title {
  font-family: 'Newsreader', serif; font-weight: 700; font-size: 40px;
  line-height: 1.15; color: var(--ink); margin-bottom: 12px;
}

.ins-lede { font-size: 15px; line-height: 1.6; color: var(--ink-m); max-width: 62ch }

/* ── Filtres ── */

.ins-filtres {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 28px 0 8px; padding-bottom: 24px; border-bottom: 1px solid var(--rule);
}

.ins-filtre {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 5px; cursor: pointer;
  background: white; color: var(--ink-m); border: 1px solid var(--rule);
  transition: border-color .15s, color .15s;
}

.ins-filtre:hover { border-color: var(--ins-m); color: var(--ins) }

.ins-filtre[aria-pressed='true'] {
  background: var(--ins-s); color: var(--ins); border-color: var(--ins-m);
}

.ins-compte {
  font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-f);
  letter-spacing: .08em; margin: 20px 0 16px;
}

/* ── Grille d'articles ── */

.ins-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px;
}

.ins-carte {
  background: white; border: 1px solid var(--rule); border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; box-shadow: 0 2px 20px rgba(0,0,0,.04);
  transition: border-color .15s, transform .15s;
}

.ins-carte:hover { border-color: var(--ins-m); transform: translateY(-2px) }

.ins-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-f);
}

.ins-cat { color: var(--ins) }

.ins-langue {
  border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; color: var(--ink-m);
}

.ins-carte h2 {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 19px;
  line-height: 1.3; color: var(--ink);
}

.ins-chapo { font-size: 13px; line-height: 1.55; color: var(--ink-m) }

.ins-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 6px }

.ins-tag {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .04em;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 3px;
  padding: 2px 6px; color: var(--ink-m);
}

.ins-vide {
  padding: 48px 0; text-align: center; font-size: 14px; color: var(--ink-f);
}

/* ── Lecteur d'article ── */

.article-wrap { max-width: 720px; margin: 0 auto; padding: 48px 20px 60px }

.article-entete { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--rule) }

.article-entete h1 {
  font-family: 'Newsreader', serif; font-weight: 700; font-size: 34px;
  line-height: 1.18; color: var(--ink); margin: 12px 0;
}

.article-soustitre {
  font-family: 'Newsreader', serif; font-style: italic; font-size: 19px;
  line-height: 1.45; color: var(--ink-m); margin-bottom: 14px;
}

.article-corps { font-size: 16px; line-height: 1.75; color: var(--ink-s) }
/* Le corps des articles vient de la base et porte à l'occasion une séquence
 * insécable plus large qu'un écran de téléphone. Mesuré : 412 px de contenu
 * pour 390 px de viewport, sur un paragraphe. Sans cette césure, c'est la page
 * entière qui défile latéralement. */
.article-corps, .ins-chapo, .ins-lede, .etude-verrou p { overflow-wrap: break-word }
.article-corps > * + * { margin-top: 20px }
.article-corps h2 {
  font-family: 'Newsreader', serif; font-weight: 700; font-size: 25px;
  color: var(--ink); margin-top: 40px; line-height: 1.25;
}
.article-corps h3 {
  font-family: 'Newsreader', serif; font-weight: 600; font-size: 20px;
  color: var(--ink); margin-top: 32px;
}
.article-corps strong { color: var(--ink); font-weight: 600 }
.article-corps a { color: var(--ins); text-decoration: underline }
.article-corps ul, .article-corps ol { padding-left: 22px }
.article-corps li + li { margin-top: 7px }
.article-corps blockquote {
  border-left: 3px solid var(--ins-m); padding-left: 18px;
  font-family: 'Newsreader', serif; font-style: italic; color: var(--ink-m);
}
.article-corps code {
  font-family: 'Geist Mono', monospace; font-size: 13px;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 5px;
}
.article-corps hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0 }

.article-pied {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}

.article-retour {
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: .06em;
  color: var(--ins); text-decoration: none;
}

.article-retour:hover { text-decoration: underline }

@media (max-width: 640px) {
  .ins-title { font-size: 30px }
  .article-entete h1 { font-size: 27px }
  .ins-grille { grid-template-columns: 1fr }
}

/* ── Études ── */

.etude-signature {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-f); margin-top: 14px;
}

.etude-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 24px 0 8px }
.etude-stat { display: flex; flex-direction: column; gap: 2px }
.etude-stat b {
  font-family: 'Newsreader', serif; font-size: 26px; color: var(--ins); font-weight: 700;
}
.etude-stat span {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-f);
}

.etude-sommaire {
  margin: 32px 0 40px; padding: 24px; background: white;
  border: 1px solid var(--rule); border-radius: 14px;
}
.etude-groupe + .etude-groupe { margin-top: 18px }
.etude-groupe-titre {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ins); margin-bottom: 8px;
}
.etude-sommaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.etude-sommaire li { display: flex }
.etude-sommaire a, .etude-lien-verrou {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 5px; border: 1px solid var(--rule);
  text-decoration: none; color: var(--ink-m); background: var(--paper);
}
.etude-sommaire a:hover { border-color: var(--ins-m); color: var(--ins) }
/* Une section sur accès se voit, et se voit inatteignable. */
.etude-lien-verrou { color: var(--ink-f); opacity: .7 }
.etude-lien-verrou::after { content: ' ·'; }

.etude-section { margin: 40px 0 }

/* Le contenu importé des études porte des tableaux et des SVG plus larges que
 * l'écran d'un téléphone — mesuré : 540 px de contenu pour 390 px de viewport,
 * et c'est la page entière qui débordait. Ils défilent désormais dans leur
 * propre conteneur, la page ne bouge plus. */
.etude-section { overflow-x: auto }
.etude-section img, .etude-section svg { max-width: 100%; height: auto }

.etude-verrou {
  margin: 44px 0; padding: 28px; border-radius: 14px;
  background: var(--ins-s); border: 1px solid var(--ins-m);
}
.etude-verrou h2 {
  font-family: 'Newsreader', serif; font-size: 21px; color: var(--ins); margin-bottom: 8px;
}
.etude-verrou p { font-size: 14px; line-height: 1.6; color: var(--ink-s); max-width: 62ch }
.etude-verrou-liste {
  margin: 16px 0; padding-left: 20px; font-size: 13px; color: var(--ink-m); line-height: 1.8;
}

.ins-section-titre {
  font-family: 'Newsreader', serif; font-weight: 700; font-size: 22px;
  color: var(--ink); margin: 44px 0 18px;
  display: flex; align-items: baseline; gap: 10px;
}
.ins-section-titre span {
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: var(--ins); border: 1px solid var(--ins-m); border-radius: 4px; padding: 2px 7px;
}

/* ── Tableaux et blocs de code des articles ──
 *
 * Trois des 25 articles portent des tableaux Markdown, un porte des blocs de
 * code. Aucun n'avait de style, et tous débordaient : mesuré jusqu'à 629 px de
 * contenu pour 390 px de large — c'est la page entière qui défilait
 * latéralement. Ils défilent désormais dans leur propre conteneur.
 *
 * `display: block` sur le tableau en fait ce conteneur ; ses lignes gardent
 * leur mise en page tabulaire, `thead`/`tbody` conservant leur `display`
 * propre. Vérifié par G6 aux trois largeurs, pas déduit. */

.article-corps table {
  display: block; overflow-x: auto; max-width: 100%;
  border-collapse: collapse; font-size: 13.5px; line-height: 1.5;
}
.article-corps th, .article-corps td {
  border: 1px solid var(--rule); padding: 8px 12px; text-align: left;
  vertical-align: top;
}
.article-corps th {
  background: var(--paper); font-weight: 600; color: var(--ink);
  font-size: 12.5px;
}
.article-corps pre {
  overflow-x: auto; max-width: 100%; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px;
  font-size: 13px; line-height: 1.55;
}
.article-corps pre code { background: none; border: none; padding: 0 }