/* ============================================================================
   FOOD FOR YOUR BRAIN (marks.teulliac.com) : feuille des pages PUBLIQUES.
   Ecrite le 2026-08-16, refonte marketing + direction UI/UX.

   Portee : accueil anonyme, page de mark, page de sujet, archive. Elle ne
   touche PAS l'application connectee (index.html et ses blocs empiles), qui
   garde sa propre feuille. Les deux ne se croisent jamais : index.php sert
   l'une OU l'autre selon la presence d'une session.

   Concept : un registre tenu a la main. La police a chasse fixe porte la
   machine (dates, domaines, tags, compteurs, numeros), la police sans porte
   l'humain (la note, plus grande et plus aeree que tout le reste). Des filets,
   jamais de cartes ni d'ombres : c'est ce qui separe une publication d'un
   tableau de bord.

   Plancher de contraste : --ink-3 est la couleur la plus claire autorisee sur
   un caractere. L'audit du 05/08 avait trouve une etiquette a 2,74:1 sur
   blanc, sous le plancher AA de 4,5:1. Rien ici ne descend sous 4,9:1.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  --paper:        #f5f2ea;
  --paper-sunk:   #ede8dc;
  --paper-raised: #fffdf7;

  --ink:    #14181d;   /* 16.1:1 */
  --ink-2:  #4d5560;   /*  6.7:1 */
  --ink-3:  #626a78;   /*  4.9:1 : plancher */

  --rule:        #ddd6c6;
  --rule-strong: #c2b9a5;

  /* Trois accents, un role chacun : navy = interaction, seal = confiance,
     sienna = registre et commerce. Un accent qui sert a deux choses ne dit
     plus rien. */
  --navy:       #004e78;   /* 8.1:1 */
  --navy-lift:  #003a5c;
  --navy-wash:  #e7edf3;
  --seal:       #00695c;   /* 6.0:1 : sur du texte de toute taille */
  --seal-lg:    #008775;   /* 4.0:1 : GRAPHIQUES et texte >= 24px UNIQUEMENT */
  --seal-wash:  #e3efeb;
  --sienna:     #9a5b1e;   /* 4.8:1 */
  --sienna-wash:#f3ead8;

  --link:        var(--navy);
  --link-hover:  var(--navy-lift);
  --focus:       #004e78;
  --btn-bg:      #004e78;
  --btn-fg:      #fffdf7;  /* 9.0:1 sur --btn-bg */
  --btn-bg-hover:#003a5c;
  --danger:      #a33227;  /* 5.7:1 */

  --sans: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display: clamp(2.35rem, 1.60rem + 3.20vw, 4.25rem);
  --fs-h2:      clamp(1.50rem, 1.25rem + 1.05vw, 2.13rem);
  --fs-h3:      clamp(1.25rem, 1.12rem + 0.55vw, 1.50rem);
  --fs-lede:    clamp(1.13rem, 1.05rem + 0.32vw, 1.31rem);
  --fs-note:    clamp(1.06rem, 1.01rem + 0.24vw, 1.19rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-meta:    .75rem;

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;   --s9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --gutter:    clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --measure:   66ch;
  --wrap:      1180px;
  --rail:      5.5rem;

  --speed: 140ms;
  --ease:  cubic-bezier(.22, .61, .36, 1);

  /* ── Passe « plus moderne » du 2026-08-16 ─────────────────────────────
     Le registre editorial ne change pas (chasse fixe pour la machine, sans
     pour l'humain, filets plutot que cartes). Ce qui change tient en quatre
     gestes, et ce sont eux qui datent ou non une page :
       1. des rayons francs plutot que le 2px d'origine, qui lit « 2012 » ;
       2. de la profondeur au survol seulement, jamais au repos ;
       3. les vignettes, que la base porte deja (colonne `img`) et que les
          pages publiques n'utilisaient pas ;
       4. l'apparition au defilement, remplacee des que le lecteur prefere
          moins de mouvement. */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --pill:  100px;

  --lift:  0 1px 2px rgba(10, 20, 35, .04), 0 12px 28px -12px rgba(10, 20, 35, .16);
  --lift-2:0 2px 4px rgba(10, 20, 35, .05), 0 22px 48px -20px rgba(10, 20, 35, .26);
}

@media (prefers-color-scheme: dark) {
  :root {
    --lift:   0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -12px rgba(0, 0, 0, .6);
    --lift-2: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px -20px rgba(0, 0, 0, .75);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #14161a;
    --paper-sunk:   #0f1115;
    --paper-raised: #1c1f25;

    --ink:    #e9e5db;   /* 14.8:1 */
    --ink-2:  #b4bac4;   /*  9.4:1 */
    --ink-3:  #8d96a3;   /*  6.2:1 */

    --rule:        #2b3037;
    --rule-strong: #3e454f;

    --navy:       #7ab8e0;
    --navy-lift:  #a4d0ee;
    --navy-wash:  #16242f;
    --seal:       #4fc9b0;
    --seal-lg:    #4fc9b0;
    --seal-wash:  #142623;
    --sienna:     #d99a4e;
    --sienna-wash:#2a2015;

    --focus:       #8fc7ea;
    --btn-bg:      #7ab8e0;
    --btn-fg:      #0f1216;
    --btn-bg-hover:#a4d0ee;
    --danger:      #f08a7c;
  }
}

/* ── Socle ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain de papier. Data URI : aucune requete reseau, et la CSP du site
   n'autorise de toute facon que 'self'. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; opacity: .05; }
}
body > * { position: relative; z-index: 1; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 46rem; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); padding: var(--s3) var(--s4);
  font: 500 var(--fs-meta)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: top var(--speed) var(--ease);
}
.skip-link:focus { top: var(--s3); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

.eyebrow {
  font: 500 var(--fs-meta)/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

.h2 {
  font-weight: 700; font-size: var(--fs-h2); line-height: 1.12;
  letter-spacing: -.02em; max-width: 24ch; text-wrap: balance;
  margin-block: var(--s3) var(--s4);
}
.section-sub {
  color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.55; max-width: 52ch;
}

.arrow-link {
  font-size: var(--fs-small); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.arrow-link::after {
  content: " \2192"; display: inline-block;
  transition: transform var(--speed) var(--ease);
}
.arrow-link:hover::after { transform: translateX(3px); }

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

/* ── En-tete ──────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 56px; flex-wrap: wrap;
}
.wordmark { display: flex; align-items: baseline; gap: var(--s3); text-decoration: none; }
.wordmark__name {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.wordmark__by {
  font: 400 var(--fs-meta)/1 var(--mono); letter-spacing: .06em; color: var(--ink-3);
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.site-nav a {
  font: 400 var(--fs-small)/1 var(--sans); color: var(--ink-2); text-decoration: none;
}
.site-nav a:hover { color: var(--link); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-nav .signin {
  font: 500 var(--fs-meta)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); padding: .55em .9em; color: var(--ink);
}
.site-nav .signin:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 640px) {
  .site-head__in { padding-block: var(--s3); }
  .site-nav { gap: var(--s4); width: 100%; margin-left: 0; }
  .site-nav a { font-size: .8125rem; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--section-y); border-bottom: 1px solid var(--rule-strong); }
.hero__grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 8fr 4fr; gap: var(--s9); align-items: start; }
  .hero__rail { padding-top: var(--s7); }
}

.display {
  font-weight: 700; font-size: var(--fs-display); line-height: 1.03;
  letter-spacing: -.03em; text-wrap: balance; max-width: 17ch;
  margin-block: var(--s5) var(--s6);
}
.hero__promise {
  font-weight: 600; font-size: var(--fs-lede); line-height: 1.45;
  letter-spacing: -.01em; max-width: 46ch;
}
.hero__anti {
  color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.55;
  max-width: 52ch; margin-top: var(--s4);
}
.hero__alt { margin-top: var(--s5); }

.hero__rail { border-left: 1px solid var(--rule-strong); padding-left: var(--s5); }
.railblock { margin-bottom: var(--s5); }
.railblock dt {
  font: 500 var(--fs-meta)/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s2);
}
.railblock dd { font: 400 .8125rem/1.6 var(--mono); color: var(--ink); margin: 0; }
.railblock__dim { color: var(--ink-2); }
.railblock dd a {
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong);
}
.railblock dd a:hover { color: var(--link); border-color: currentColor; }

/* Trois reveils au chargement, 60 ms d'ecart, et rien d'autre ne bouge. */
.reveal { animation: rise 400ms var(--ease) both; }
.reveal--2 { animation-delay: 60ms; }
.reveal--3 { animation-delay: 120ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Bande de preuve ──────────────────────────────────────────────────── */
.proof {
  background: var(--paper-sunk);
  border-block: 1px solid var(--rule);
  padding-block: var(--s7);
}
.proof__grid {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.proof__fig { font: 500 2rem/1 var(--mono); letter-spacing: -.01em; color: var(--ink); }
.proof__fig--seal { color: var(--seal); }
.proof__lbl {
  margin-top: var(--s2);
  font: 500 var(--fs-meta)/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.proof__sources { margin-top: var(--s6); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.proof__sources p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; max-width: 78ch; }

/* ── Le flux ──────────────────────────────────────────────────────────── */
.feed { padding-block: var(--section-y); }
.feed__list { margin-top: var(--s7); }

.dateline {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  border-top: 2px solid var(--rule-strong); padding-top: var(--s3); margin-top: var(--s8);
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.dateline:first-child { margin-top: 0; }
.dateline > :first-child { color: var(--ink); }
.dateline > :last-child { color: var(--ink-3); }

.mark {
  position: relative;
  display: grid; gap: var(--s3);
  padding-block: var(--s6);
  border-top: 1px solid var(--rule);
  margin-inline: calc(var(--gutter) / -2);
  padding-inline: calc(var(--gutter) / 2);
  transition: background-color var(--speed) var(--ease);
}
.mark:hover { background-color: var(--navy-wash); }
@media (min-width: 760px) {
  .mark { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0 var(--s5); }
}

.mark__no {
  font: 500 .8125rem/1 var(--mono); letter-spacing: .06em;
  color: var(--sienna); opacity: .72; padding-top: .35rem;
  transition: opacity var(--speed) var(--ease);
}
.mark:hover .mark__no { opacity: 1; }
@media (max-width: 759px) { .mark__no { display: none; } }

.mark__meta {
  font: 400 .8125rem/1.4 var(--mono); letter-spacing: .02em;
  color: var(--ink-3); margin-bottom: var(--s2);
}
.mark__meta .dot { margin-inline: .4em; }
.mark__src { color: var(--ink-2); }

.mark__title {
  font-weight: 600; font-size: var(--fs-h3); line-height: 1.22;
  letter-spacing: -.015em; max-width: 40ch; text-wrap: balance;
}
.mark__title a {
  color: var(--ink); text-decoration: none;
  background-image: linear-gradient(var(--rule-strong), var(--rule-strong));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: .12em;
  transition: background-size var(--speed) var(--ease), color var(--speed) var(--ease);
}
.mark:hover .mark__title a, .mark__title a:focus-visible {
  color: var(--link); background-size: 100% 2px;
}
/* Toute la ligne devient cliquable vers le permalien. ⚠️ Tout lien AJOUTE
   plus tard dans .mark doit porter `position:relative; z-index:1`, sinon il
   passe sous cette surface et devient inatteignable. */
.mark__title a::after { content: ""; position: absolute; inset: 0; }

/* La note : c'est le contenu original, elle doit en avoir l'air. */
.mark__note {
  font-size: var(--fs-note); line-height: 1.62; letter-spacing: .003em;
  color: var(--ink); max-width: 34em; margin-top: var(--s3); text-wrap: pretty;
}

.mark__foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s3) var(--s5); margin-top: var(--s4);
}
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; }
.tags a {
  position: relative; z-index: 1; display: inline-block;
  font: 400 var(--fs-meta)/1 var(--mono); letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--rule); padding: .38em .6em;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.tags a:hover { border-color: var(--link); color: var(--link); }

.mark__out {
  position: relative; z-index: 1; margin-left: auto;
  font: 400 .8125rem/1 var(--mono); color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
}
.mark__out:hover { color: var(--link); border-color: currentColor; }

.feed__more { margin-top: var(--s7); text-align: center; font: 400 .8125rem/1 var(--mono); }

/* ── Charte editoriale ────────────────────────────────────────────────── */
.charter { background: var(--paper-sunk); border-block: 1px solid var(--rule); padding-block: var(--section-y); }
.charter__grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) {
  .charter__grid { grid-template-columns: 5fr 7fr; gap: var(--s9); align-items: start; }
  .charter__aside { position: sticky; top: 6rem; }
}
.charter__list { list-style: none; padding: 0; counter-reset: rule; }
.charter__list li {
  counter-increment: rule;
  border-top: 1px solid var(--rule);
  padding-block: var(--s5);
  padding-left: 3.25rem;
  position: relative;
}
.charter__list li:first-child { border-top: 0; padding-top: 0; }
.charter__list li::before {
  content: "No. " counter(rule, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s5);
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .06em; color: var(--danger);
}
.charter__list li:first-child::before { top: 0; }
.charter__list b { display: block; font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.charter__list span { display: block; margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; max-width: 56ch; }
.charter__close {
  margin-top: var(--s7); border-left: 2px solid var(--sienna); padding-left: var(--s4);
  font-weight: 600; font-size: var(--fs-note); line-height: 1.5; max-width: 40ch;
}

/* ── Offre ────────────────────────────────────────────────────────────── */
.pricing { padding-block: var(--section-y); }
.tiers {
  margin-top: var(--s8); display: grid;
  border: 1px solid var(--rule-strong); background: var(--paper-raised);
}
@media (min-width: 820px) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { padding: var(--s7); border-top: 1px solid var(--rule); }
.tier:first-child { border-top: 0; }
@media (min-width: 820px) {
  .tier { border-top: 0; }
  .tier + .tier { border-left: 1px solid var(--rule-strong); }
}
.tier--member { border-top: 3px solid var(--sienna); }
.tier__name {
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.tier__price { margin-top: var(--s4); display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.tier__figure { font: 500 2.5rem/1 var(--mono); letter-spacing: -.01em; color: var(--ink); }
.tier--member .tier__figure { color: var(--sienna); }
.tier__unit { font: 400 .8125rem/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.tier__alt { margin-top: var(--s2); font: 400 .8125rem/1.5 var(--mono); color: var(--ink-3); }
.tier__lead {
  margin-top: var(--s5); padding-left: var(--s4); border-left: 2px solid var(--sienna);
  font-size: var(--fs-note); line-height: 1.55; color: var(--ink); max-width: 34em;
}
.tier__list { margin-top: var(--s5); }
.tier__list dt { font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.tier__list dd { margin: var(--s1) 0 var(--s4); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.tier__list dd:last-child { margin-bottom: 0; }
.tier__cta { display: inline-block; margin-top: var(--s6); text-decoration: none; }
.tier__foot { margin-top: var(--s3); font-size: var(--fs-small); }
.tier__foot--dim { color: var(--ink-3); max-width: 42ch; }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.btn {
  font: 600 var(--fs-body)/1.4 var(--sans);
  border: 1px solid transparent; border-radius: 2px;
  padding: .7rem 1.25rem; cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* ── Capture email ────────────────────────────────────────────────────── */
.capture { margin-top: var(--s6); max-width: 34rem; }
.capture__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
.capture__field { flex: 1 1 16rem; }
.capture__label {
  display: block; margin-bottom: var(--s2);
  font: 500 var(--fs-meta)/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);   /* 6,7:1. Jamais --ink-3 sur une etiquette de champ. */
}
.capture__input {
  width: 100%; font: 400 var(--fs-body)/1.4 var(--sans); color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule-strong);
  border-radius: 2px; padding: .7rem .85rem;
  transition: border-color var(--speed) var(--ease);
}
.capture__input::placeholder { color: var(--ink-3); }
.capture__input:hover { border-color: var(--ink-3); }
.capture__input:focus-visible { border-color: var(--focus); }
.capture__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.capture__note { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-3); max-width: 46ch; }
.capture__status:empty { display: none; }
.capture__status {
  margin-top: var(--s3); font: 400 var(--fs-small)/1.5 var(--sans);
  color: var(--seal); border-left: 2px solid currentColor; padding-left: var(--s3);
}
.capture__status.is-error { color: var(--danger); }
.capture.is-done .capture__row, .capture.is-done .capture__note { display: none; }

.closer { border-block: 1px solid var(--rule-strong); padding-block: var(--section-y); }
.closer__in { max-width: 40rem; }

/* ── Pied ─────────────────────────────────────────────────────────────── */
.site-foot { background: var(--paper-sunk); padding-block: var(--s8); }
.site-foot__grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.site-foot h2 {
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3);
}
.site-foot ul { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.site-foot a { font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--link); text-decoration: underline; }
.site-foot__bar {
  margin-top: var(--s7); border-top: 1px solid var(--rule); padding-top: var(--s4);
  font: 400 var(--fs-meta)/1.6 var(--mono); color: var(--ink-3);
}

/* ── Page d'un mark ───────────────────────────────────────────────────── */
.crumb { font: 400 var(--fs-meta)/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.crumb a:hover { color: var(--link); }

.entry { padding-block: var(--section-y); }
.entry__no {
  margin-top: var(--s6); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-strong);
  font: 500 1.5rem/1 var(--mono); letter-spacing: .08em; color: var(--sienna);
}
.entry__date { margin-top: var(--s4); font: 400 .8125rem/1.6 var(--mono); color: var(--ink-3); }
.entry__title {
  margin-top: var(--s4);
  font-weight: 700; font-size: var(--fs-h2); line-height: 1.14;
  letter-spacing: -.02em; max-width: 22ch; text-wrap: balance;
}
.entry__lbl {
  margin-top: var(--s7);
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.entry__note {
  margin-top: var(--s4); padding-left: var(--s5); border-left: 2px solid var(--sienna);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
  line-height: 1.65; color: var(--ink); max-width: 32em; text-wrap: pretty;
}
.srcbox {
  margin-top: var(--s7); border: 1px solid var(--rule-strong);
  background: var(--paper-raised); padding: var(--s5);
}
.srcbox__lbl {
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.srcbox__name { margin-top: var(--s2); font-weight: 600; font-size: var(--fs-body); }
.srcbox__title { margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.srcbox .btn { margin-top: var(--s4); text-decoration: none; display: inline-block; }
.entry__tags { margin-top: var(--s6); }

.related { margin-top: var(--s8); border-top: 2px solid var(--rule-strong); padding-top: var(--s4); }
.related h2 {
  font: 500 var(--fs-meta)/1.35 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s3);
}
.related__item { border-top: 1px solid var(--rule); padding-block: var(--s4); }
.related__item:first-of-type { border-top: 0; }
.related__meta { font: 400 var(--fs-meta)/1.4 var(--mono); color: var(--ink-3); }
.related__title { margin-top: var(--s1); font-weight: 600; font-size: var(--fs-body); line-height: 1.35; }
.related__title a { color: var(--ink); text-decoration: none; }
.related__title a:hover { color: var(--link); }
.related__excerpt { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; max-width: 60ch; }

/* ── Page de sujet et archive ─────────────────────────────────────────── */
.topichead { background: var(--paper-sunk); border-bottom: 1px solid var(--rule); padding-block: var(--section-y); }
.topichead h1 {
  margin-top: var(--s3);
  font-weight: 700; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em;
}
.topichead__def { margin-top: var(--s4); color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.55; max-width: 52ch; }
.topichead__stat { margin-top: var(--s5); font: 400 .8125rem/1.6 var(--mono); color: var(--ink-3); }

.chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin-top: var(--s4); }
.chiprow a {
  display: inline-block; font: 400 var(--fs-meta)/1 var(--mono); letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none; border: 1px solid var(--rule); padding: .45em .7em;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.chiprow a:hover { border-color: var(--link); color: var(--link); }

.empty {
  margin-top: var(--s7); border: 1px dashed var(--rule-strong); padding: var(--s6);
  color: var(--ink-2); font-size: var(--fs-small); max-width: 44ch;
}


/* ═════════════════════════════════════════════════════════════════════════
   PASSE « PLUS MODERNE », 2026-08-16
   Bloc ajoute APRES le reste : il surcharge sans rien reecrire, donc le
   retour arriere consiste a supprimer ce bloc et rien d'autre. Les tokens
   de couleur, l'echelle typographique et le plancher de contraste ne
   bougent pas : ce qui change est la matiere, pas la voix.
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1. Rayons ─────────────────────────────────────────────────────────
   Le 2px d'origine ne se voit pas et date la page. On assume des rayons
   francs sur ce qui est une SURFACE, et la pilule sur ce qui est une
   etiquette. Les filets restent des filets. */
.capture__input, .btn, .skip-link { border-radius: var(--r-sm); }
.tiers, .srcbox, .empty           { border-radius: var(--r-md); }
.tags a, .chiprow a               { border-radius: var(--pill); }
.tiers { overflow: hidden; }

/* ── 2. Profondeur au survol seulement ─────────────────────────────────
   Une ombre au repos ferait des cartes, et des cartes font un tableau de
   bord. Une ombre qui n'apparait qu'au survol dit « ceci est cliquable »
   sans rien coûter au calme de la page au repos. */
.mark {
  border-radius: var(--r-md);
  transition: background-color var(--speed) var(--ease),
              box-shadow 180ms var(--ease),
              transform 180ms var(--ease);
}
.mark:hover {
  box-shadow: var(--lift);
  transform: translateY(-2px);
}
.mark:has(a:focus-visible) { box-shadow: var(--lift); }

.btn--primary:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.btn { transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease),
                   border-color var(--speed) var(--ease), box-shadow 180ms var(--ease),
                   transform 180ms var(--ease); }

/* ── 3. Vignettes ──────────────────────────────────────────────────────
   La colonne `img` existe depuis le debut et aucune page publique ne s'en
   servait. C'est le geste qui fait le plus pour l'allure, et le seul qui ne
   coûte pas une ligne de design : la matiere vient du contenu.
   `aspect-ratio` fige la place AVANT le chargement, sinon chaque image qui
   arrive pousse le texte sous le curseur du lecteur. */
.mark__body { display: grid; gap: var(--s4); }
@media (min-width: 620px) {
  .mark__body { grid-template-columns: minmax(0, 1fr) 168px; align-items: start; }
  .mark__thumb { grid-column: 2; grid-row: 1 / span 4; }
}
.mark__thumb {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: var(--r-sm);
  background: var(--paper-sunk); border: 1px solid var(--rule);
  transition: filter 200ms var(--ease);
}
.mark:hover .mark__thumb { filter: saturate(1.08) contrast(1.02); }
/* Les colonnes de gauche ne doivent pas passer sous la vignette. */
@media (min-width: 620px) {
  .mark__meta, .mark__title, .mark__note, .mark__foot { grid-column: 1; }
}

/* ── 4. Apparition au defilement ───────────────────────────────────────
   Pose par IntersectionObserver, jamais par la feuille seule : sans
   JavaScript, `.enter` n'est jamais ajoute et tout reste visible. Une
   animation qui cache le contenu quand le script tombe est un defaut, pas
   un effet. */
/* Etat par defaut : VISIBLE. La classe `js` n'est posee que par un script
   inline en tete de document, donc un lecteur sans JavaScript ne voit jamais
   d'element cache, et il n'y a pas de clignotement : le masquage est actif
   avant le premier rendu, pas apres. */
.enter { opacity: 1; transform: none; }
html.js .enter { opacity: 0; transform: translateY(14px); }
html.js .enter.vu {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html.js .enter, html.js .enter.vu { opacity: 1; transform: none; transition: none; }
  .mark:hover { transform: none; }
  .btn--primary:hover { transform: none; }
}

/* ── 5. Un peu de couleur, tenue ───────────────────────────────────────
   Trois accents existaient deja mais ne se voyaient qu'en filets. On leur
   donne une presence, sans jamais tomber dans le degrade decoratif : un
   filet colore sous l'en-tete, et une lueur tres basse derriere le hero. */
.site-head { border-bottom: 0; }
.site-head::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--seal-lg) 52%, var(--sienna) 100%);
  opacity: .85;
}
.hero {
  background-image:
    radial-gradient(70rem 32rem at 8% -18%, color-mix(in srgb, var(--navy) 9%, transparent), transparent 62%),
    radial-gradient(56rem 26rem at 96% -6%, color-mix(in srgb, var(--seal-lg) 9%, transparent), transparent 58%);
}
.proof__fig { font-variant-numeric: tabular-nums; }
.tier--member { background: linear-gradient(180deg, var(--sienna-wash) 0%, var(--paper-raised) 42%); }

/* ── 6. Le nom, qui est long et doit rester lisible ────────────────────
   « Food For Your Brain » fait dix-neuf caracteres la ou « Marks » en
   faisait cinq. On resserre plutot que de le tronquer : un nom coupe ne
   vaut pas mieux qu'un sigle. */
.wordmark { flex-wrap: wrap; row-gap: 0; }
.wordmark__name { font-size: 1rem; letter-spacing: .02em; line-height: 1.15; }
@media (max-width: 720px) {
  .wordmark__name { font-size: .94rem; }
  .wordmark__by { flex-basis: 100%; }
}

/* ── 7. L'en-tete ne colle pas sur mobile ──────────────────────────────
   Mesure : 135px de haut en 375px de large, la navigation passant a la
   ligne. Colle, il mangeait un sixieme de l'ecran en permanence, sur des
   pages faites pour lire. Il defile donc avec la page en dessous de 640px
   et revient quand on remonte, ce qui est le comportement attendu d'un
   journal plutot que d'une application. */
@media (max-width: 640px) {
  .site-head { position: static; backdrop-filter: none; }
}

/* ── 8. Konami : le mode « second helping » ────────────────────────────
   Haut haut bas bas gauche droite gauche droite B A.

   Tout le site etant tenu par des tokens, dix touches suffisent a le
   basculer : on ne reecrit pas une regle, on redefinit la palette. C'est
   accessoirement la meilleure preuve que le systeme de couleurs tient.
   `html.konami` l'emporte sur `:root` par specificite (0,1,1 contre 0,1,0),
   y compris sur le bloc sombre, une requete media n'ajoutant aucune
   specificite. */
html.konami {
  --paper:        #05100a;
  --paper-sunk:   #030a06;
  --paper-raised: #0a1a10;

  --ink:    #b9ffd0;   /* 13.6:1 sur --paper */
  --ink-2:  #6fe0a0;   /*  8.6:1 */
  --ink-3:  #4dbb80;   /*  6.0:1, le plancher tient aussi ici */

  --rule:        #14361f;
  --rule-strong: #1f5230;

  --navy:      #7bf3b6;
  --navy-lift: #a8ffd0;
  --navy-wash: #0a1f13;
  --seal:      #7bf3b6;
  --seal-lg:   #7bf3b6;
  --sienna:    #ffd166;
  --sienna-wash:#1a1608;

  --focus:       #7bf3b6;
  --btn-bg:      #7bf3b6;
  --btn-fg:      #04140b;
  --btn-bg-hover:#a8ffd0;
  --danger:      #ff8f7a;

  --r-sm: 2px; --r-md: 2px; --pill: 2px;
}
html.konami body { font-family: var(--mono); }
html.konami .display, html.konami .h2, html.konami .mark__title,
html.konami .entry__title, html.konami .topichead h1 {
  font-family: var(--mono); letter-spacing: 0; font-weight: 500;
}
html.konami body::before { opacity: .06; mix-blend-mode: screen; }
/* Lignes de balayage, tres basses. Sous mouvement reduit elles ne defilent
   pas : elles restent, immobiles. */
html.konami body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(123, 243, 182, .05) 0 1px, transparent 1px 3px);
}
html.konami .site-head::after {
  background: linear-gradient(90deg, var(--seal-lg), var(--sienna));
}
html.konami .mark:hover { box-shadow: 0 0 0 1px var(--rule-strong); transform: none; }

/* Le message qui annonce la bascule. `role="status"` cote balisage, donc il
   est aussi lu par une synthese vocale. */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem);
  z-index: 60; max-width: min(30rem, calc(100vw - 2rem));
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  box-shadow: var(--lift-2); padding: var(--s3) var(--s5);
  font: 500 var(--fs-meta)/1.5 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.toast.vu { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ── 9. Le credit « via » (2026-08-16) ─────────────────────────────────
   Ou le lien a ete trouve. Repris de blogmarks.net, 2005. Volontairement
   discret et jamais cliquable : c'est une politesse, pas un echange de
   liens. */
.mark__via { color: var(--ink-3); font-style: normal; }
.srcbox__via {
  margin-top: var(--s2);
  font: 400 .8125rem/1.5 var(--mono);
  color: var(--ink-3); letter-spacing: .02em;
}

/* ── 10. Archive paginee et invitation a chercher (2026-08-16) ─────────
   La recherche est le moment de conversion, et le seul : la frontiere est
   l'USAGE du corpus, pas l'acces au contenu. */
.searchbox {
  margin-top: var(--s6);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--sienna);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  padding: var(--s5);
  max-width: 46rem;
}
.searchbox__lbl {
  font: 500 var(--fs-meta)/1.35 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s2);
}
.searchbox__txt { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.6; }

/* De VRAIS liens, jamais de defilement infini : la moitie de l'archive
   redeviendrait invisible aux moteurs, ce qui reviendrait a n'avoir rien
   repare. */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s8); border-top: 2px solid var(--rule-strong);
  padding-top: var(--s5);
}
.pagination__step {
  font: 500 var(--fs-meta)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
  padding: .8em 1.1em; color: var(--ink);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.pagination__step:hover { border-color: var(--link); color: var(--link); }
.pagination__step.is-off { color: var(--ink-3); border-color: var(--rule); cursor: default; }
.pagination__pos {
  font: 400 var(--fs-meta)/1 var(--mono); letter-spacing: .08em; color: var(--ink-3);
}

/* ── 11. Bandeau de service, en pied (2026-08-16) ──────────────────────
   Descendu du hero : ces trois informations sont utiles mais ne sont pas ce
   pour quoi on vient. En tete elles disputaient l'attention a la proposition
   et aux trois marks ; ici elles restent consultables sans rien couter. */
.dispatch { border-top: 1px solid var(--rule); background: var(--paper); }
.dispatch__in {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  padding-block: var(--s5);
  font: 400 var(--fs-meta)/1.6 var(--mono);
  letter-spacing: .04em; color: var(--ink-2);
}
.dispatch b {
  font-weight: 500; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em; margin-right: .5em;
}
.dispatch a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.dispatch a:hover { color: var(--link); border-color: currentColor; }

/* Le hero n'a plus de colonne de droite : une seule colonne, et la mesure du
   titre suffit a le tenir. */
@media (min-width: 900px) {
  .hero__grid--seul { grid-template-columns: minmax(0, 1fr); }
}