/* ============================================================================
   L'INDEX DES HISTOIRES — repris de `mew_dash/v2/mentorni-histoires/histoires-plan.html`

   Tout est cloisonné sous `.plan`. Cette feuille partage des noms avec
   celle des pages d'histoire — `.ava`, `.tag`, `.top`, `.grid` — et les
   deux peuvent se croiser : sans cloisonnement, la dernière chargée
   gagnerait sur l'autre, au hasard de l'ordre.
   ========================================================================= */


* { box-sizing: border-box; }
  .plan { margin: 0; background: #fff; font-family: Nunito, system-ui, sans-serif; color: #1C1C1E; }
  .plan a { color: #C0392B; text-decoration: none; font-weight: 800; }
  .plan .ico { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
  .plan .num { font-variant-numeric: tabular-nums; }
  .plan .grad { background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); }

  .plan .wrap { max-width: 1000px; margin: 0 auto; padding: clamp(20px, 4vw, 44px); }

/* Les deux pages partagent la même largeur : la barre n'a plus à s'adapter.
   Seul le retrait latéral suit celui du contenu de l'index, plus généreux
   que celui des pages d'histoire. */
.hist.sur-index .bar .in { padding-left: clamp(20px, 4vw, 44px); padding-right: clamp(20px, 4vw, 44px); }
  .plan .mark { display: block; font-size: 26px; font-weight: 900; letter-spacing: -1.1px; color: #FF6363; }
  .plan h1 { margin: 16px 0 0; font-family: Capriola, Georgia, serif; font-size: clamp(30px,5vw,46px); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
  .plan .lead { margin: 16px 0 0; max-width: 62ch; font-size: 19px; font-weight: 700; line-height: 1.62; color: #3F3E44; text-wrap: pretty; }
  .plan .lead b { font-weight: 900; color: #1C1C1E; }

/* ---------- filtres par type de relation ---------- */
  .plan .tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; padding: 6px; border-radius: 999px; background: #F5F2EF; }
  .plan .tab { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 17px; border: 0; border-radius: 999px; background: none; color: #4A4950; font-family: inherit; font-size: 14.5px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
  .plan .tab .n { font-weight: 900; color: #6E6D72; font-variant-numeric: tabular-nums; }
  .plan .tab:hover { background: #fff; color: #1C1C1E; }
  .plan .tab.on { background: #1C1C1E; color: #fff; }
  .plan .tab.on .n { color: rgba(255,255,255,.7); }
  .plan .tally { margin-left: auto; padding-right: 12px; font-size: 14.5px; font-weight: 800; color: #4A4950; font-variant-numeric: tabular-nums; }

/* ---------- catégories ---------- */
  .plan .cat { margin-top: clamp(30px,4.6vw,46px); }
  .plan .cat.hide { display: none; }
  .plan .cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid #F0EBE7; }
  .plan .cat-head .emo { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; background: #FFF1F1; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
  .plan .cat-head .tx { flex: 1 1 180px; min-width: 0; }
  .plan .cat-head b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.035em; }
  .plan .cat-head span { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; color: #5F5E64; }
  .plan .cat-head .cnt { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; background: #F5F2EF; color: #45444B; font-size: 14.5px; font-weight: 900; white-space: nowrap; }

  .plan .grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 720px) { .grid { grid-template-columns: minmax(0,1fr); } }
  .plan .story { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1.5px #F0EBE7; transition: transform .18s cubic-bezier(.22,.9,.24,1), box-shadow .22s; }
  .plan .story:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #FFD3D3, 0 22px 38px -28px rgba(255,99,99,.6); }
  .plan .story.hide { display: none; }
  .plan .story.done { box-shadow: inset 0 0 0 2px #FFD3D3, 0 18px 34px -30px rgba(255,99,99,.7); }

  .plan .story .top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .plan .ava { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 17px; background: #F5F2EF; color: #4A4950; font-size: 18px; font-weight: 900; letter-spacing: .02em; }

  .plan .story .who { flex: 1 1 140px; min-width: 0; }
  .plan .story .who b { display: block; font-size: 19px; font-weight: 900; letter-spacing: -.03em; line-height: 1.25; text-wrap: pretty; }
  .plan .story .who .sb { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; color: #B8331F; overflow-wrap: anywhere; }
  .plan .story .flag { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: #E4EBE9; color: #14663F; font-size: 12.5px; font-weight: 900; white-space: nowrap; }

  .plan .story p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.66; color: #33323A; text-wrap: pretty; }
  .plan .story .proof { display: flex; align-items: flex-start; gap: 11px; padding: 15px 16px; border-radius: 18px; background: #FFF6F2; font-size: 16px; font-weight: 800; line-height: 1.58; color: #33323A; text-wrap: pretty; }

  .plan .story .proof .ico { flex: 0 0 auto; font-size: 18px; color: #C0392B; }
  .plan .story .tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .plan .story .read { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: auto; height: 54px; padding: 0 22px; border-radius: 999px; background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); color: #fff; font-size: 16.5px; font-weight: 900; letter-spacing: -.2px; text-shadow: 0 1px 2px rgba(150,30,30,.5); box-shadow: 0 14px 26px -16px rgba(255,99,99,.85); transition: transform .18s cubic-bezier(.22,.9,.24,1); }
  .plan .story .read:hover { color: #fff; transform: translateY(-2px); }
  .plan .story .read.soon { background: #F2EFEC; color: #5F5E64; text-shadow: none; box-shadow: none; cursor: default; }
  .plan .story .read.soon .ico { color: #8A8890; }
  .plan .story .read .ico { font-size: 19px; }

  .plan .tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: #F5F2EF; color: #45444B; font-size: 14px; font-weight: 800; white-space: nowrap; }
  .plan .tag .ico { font-size: 15px; }
  .plan .tag.rel { background: #1C1C1E; color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

/* ---- L'ouverture de l'index ------------------------------------------
   Le titre et le chapô reprennent ceux des pages d'histoire : c'est la
   même voix éditoriale, et le contraste entre un grand titre en Capriola
   et un chapô gris épais est ce qui fait tenir l'ouverture. Le plan
   d'origine, lui, était un document de travail — son titre plus discret
   et son texte en 16 px convenaient à cet usage, pas à une page d'accueil
   de rubrique.

   La largeur est bornée à 56 caractères : au-delà, l'œil perd la ligne
   suivante en revenant à la marge. C'est pour cela que le titre tient sur
   deux lignes plutôt qu'une longue. */
.plan .hero { max-width: 60ch; }

.plan .hero h1 {
  font-family: Capriola, Georgia, serif;
  font-size: clamp(34px, 6.4vw, 58px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.plan .hero .lede {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(18px, 2.3vw, 21px);
  font-weight: 700;
  line-height: 1.58;
  color: #3F3E44;
  text-wrap: pretty;
}