/* ============================================================
   DOONI — SECTION NOTES (couche web)
   Une racine, deux surfaces : le HUB (« Les notes ») et le
   GABARIT d'une note. Mêmes tokens (dooni-web.css), même
   vocabulaire que Home/Studio. Couleur = action :
   rose = café · cyan = nav/survol · jaune = trace (idée centrale).
   Pas de code couleur par bloc — les blocs se distinguent par le NOM.
   ============================================================ */

/* ====================================================================
   COMMUN
   ==================================================================== */
.page { max-width: var(--shell-max); margin: 0 auto; }
.pad { padding: clamp(40px, 6vw, 96px) var(--gutter); }

/* ---- pont café partagé (hub + note) ---- */
.cafe-bridge { border-top: var(--rule); }
.cafe-bridge-in { padding: clamp(36px,5vw,72px) var(--gutter); max-width: 760px; }
.cafe-bridge .cb-eyebrow { display: block; color: var(--action-primary); }
.cafe-bridge .cb-title { margin-top: 16px; font-size: clamp(26px,3.4vw,48px); max-width: 16ch; }
.cafe-bridge .cb-body { margin-top: 16px; max-width: 52ch; }
.cafe-bridge .cb-cta { margin-top: 28px; }

/* ---- sign-off (template de note) ---- */
.signoff { display: flex; align-items: center; gap: 12px; }
.signoff .so-pal { color: var(--ink-500); }

/* ====================================================================
   HUB · « LES NOTES »
   ==================================================================== */

/* ---------- 01 · THÈSE DE LA SÉRIE ---------- */
.notes-hero { position: relative; }
.notes-hero .hero-eyebrow .dot { background: var(--action-secondary); }
.notes-hero .nh-wrap { padding: clamp(36px,5vw,80px) var(--gutter) clamp(32px,4vw,56px); }
.notes-hero .nh-display {
  font-family: var(--font-headline); font-weight: 800;
  text-transform: uppercase; line-height: 0.98;
  letter-spacing: -0.015em; color: var(--structure);
  font-size: clamp(36px, 5.6vw, 82px); margin: 0; max-width: 17ch; text-wrap: balance;
}
.notes-hero .nh-lead { max-width: 58ch; margin: clamp(28px,3.4vw,46px) 0 0; }
.notes-hero .nh-lead .no-fluff { font-family: var(--font-tech); font-size: 0.82em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); display: block; margin-top: 14px; }

/* fiche technique du corpus — le compte SIGNIFIE (profondeur = autorité) */
.corpus-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); border-left: var(--rule); }
.corpus-stats .st { border-right: var(--rule); border-bottom: var(--rule); padding: clamp(18px,2.4vw,30px) clamp(20px,2.4vw,30px); }
.corpus-stats .st .v { font-family: var(--font-poster); font-weight: var(--poster-weight); text-transform: uppercase; font-size: clamp(40px,5.4vw,84px); line-height: 0.86; color: var(--structure); }
.corpus-stats .st .k { margin-top: 10px; }

/* ---------- 02 · FILTRE LÉGER (4 blocs + TOUT) ---------- */
.notes-filter {
  position: sticky; top: 71px; z-index: 40;
  background: var(--surface); border-top: var(--rule); border-bottom: var(--rule);
  display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none;
}
.notes-filter::-webkit-scrollbar { display: none; }
.notes-filter .f {
  font-family: var(--font-tech); font-weight: 500; font-size: 13px;
  letter-spacing: var(--trk-tech); text-transform: uppercase;
  color: var(--ink-500); background: none; border: none; border-right: var(--hair);
  padding: 15px clamp(16px,2vw,26px); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.notes-filter .f:hover { color: var(--structure); }
.notes-filter .f.is-active { background: var(--structure); color: var(--white); } /* aplat noir, jamais une couleur déco */
.notes-filter .f-count { color: var(--ink-300); margin-left: 8px; }
.notes-filter .f.is-active .f-count { color: var(--ink-500); }

/* ---------- 03 · SOMMAIRE PAR BLOCS ---------- */
.somm-intro { padding: clamp(22px,2.6vw,34px) var(--gutter); border-bottom: var(--rule); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.somm-intro .si-lab { color: var(--ink-500); }
.somm-intro .si-note { font-family: var(--font-read); font-size: 15px; color: var(--ink-500); margin: 0; }

.somm-block { border-top: var(--rule); }
.somm-block:first-of-type { border-top: none; }
.somm-block .block-intro {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.3fr);
  gap: clamp(16px,3vw,48px); align-items: end;
  padding: clamp(30px,3.6vw,56px) var(--gutter) clamp(18px,2vw,28px);
}
.somm-block .block-name { font-size: clamp(30px,4.2vw,62px); line-height: 0.94; }
.somm-block .block-head-l { display: flex; flex-direction: column; gap: 14px; }
.somm-block .block-range { align-self: flex-start; font-family: var(--font-tech); font-weight: 500; font-size: 12px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); border-left: var(--rule); padding: 2px 0 2px 10px; }
.somm-block .block-desc { max-width: 44ch; margin: 0; }
.somm-block .block-desc.is-empty { display: none; }

.somm-list { padding: 0 var(--gutter) clamp(26px,3.2vw,44px); }

/* sous-structure : Actes (chapitre) — sinon, liste à plat */
.acte-head { display: flex; align-items: baseline; gap: 14px; padding: clamp(20px,2.4vw,30px) 0 6px; border-top: var(--hair); margin-top: 6px; }
.acte-head:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
.acte-head .acte-k { font-family: var(--font-tech); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); background: var(--structure); padding: 4px 9px; }
.acte-head .acte-t { font-family: var(--font-headline); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); }

/* la ligne de sommaire — typographique, scannable, pas de vignette */
.somm-row {
  display: flex; align-items: baseline; gap: clamp(14px,1.6vw,22px);
  padding: clamp(15px,1.8vw,22px) 0; border-bottom: var(--hair);
  text-decoration: none; color: inherit;
}
.somm-row:last-child { border-bottom: none; }
.somm-row .n {
  font-family: var(--font-tech); font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  color: var(--action-secondary); background: var(--structure);
  padding: 4px 9px; align-self: flex-start; flex: none; transition: transform var(--t-fast);
}
.somm-row .somm-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.somm-row .somm-title {
  font-family: var(--font-headline); font-weight: 700; font-size: clamp(18px,2vw,25px);
  line-height: 1.14; color: var(--structure); text-transform: none;
}
.somm-row .somm-title .u { box-shadow: inset 0 -2px 0 var(--action-secondary); transition: box-shadow var(--t-fast); }
.somm-row .somm-extrait { font-family: var(--font-read); font-size: 15px; line-height: 1.5; color: var(--ink-500); max-width: 56ch; margin: 0; }
.somm-row .arrow { margin-left: auto; align-self: flex-start; font-family: var(--font-tech); color: var(--ink-300); padding-left: 16px; transition: transform var(--t-fast), color var(--t-fast); }
.somm-row:hover .somm-title .u { box-shadow: inset 0 -0.62em 0 var(--action-secondary); } /* trace cyan au survol */
.somm-row:hover .arrow { color: var(--structure); transform: translate(4px,-1px); }

/* note à venir — placeholder rédigé plus tard (non cliquable) */
.somm-row.is-soon { cursor: default; }
.somm-row.is-soon .n { color: var(--ink-500); background: var(--ink-100); }
.somm-row.is-soon .somm-title { color: var(--ink-300); }
.somm-row.is-soon .soon-badge {
  margin-left: auto; align-self: flex-start; flex: none;
  padding: 4px 9px; background: var(--ink-100); color: var(--ink-500);
  letter-spacing: var(--trk-tech);
}

/* bloc vide (Experience au lancement) — dégradation propre */
.somm-empty { padding: clamp(20px,2.4vw,30px) 0 clamp(8px,1vw,14px); display: flex; align-items: center; gap: 14px; }
.somm-empty .se-dash { font-family: var(--font-tech); color: var(--ink-300); font-size: 18px; }
.somm-empty .se-txt { font-family: var(--font-tech); font-size: 12px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); }

/* ====================================================================
   GABARIT D'UNE NOTE
   ==================================================================== */

/* ---------- barre haute de lecture (chrome réduit) ---------- */
.read-bar { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: var(--rule); }
.read-bar-row { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 var(--gutter); gap: 16px; }
.read-left { display: flex; align-items: center; gap: clamp(14px,2.4vw,28px); min-width: 0; }
.read-left .brandmark { display: flex; align-items: center; text-decoration: none; flex: none; }
.read-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-size: 12px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); text-decoration: none; white-space: nowrap; transition: color var(--t-fast); }
.read-back:hover { color: var(--structure); }
.read-back .a { transition: transform var(--t-fast); }
.read-back:hover .a { transform: translateX(-4px); }
.read-right { display: flex; align-items: center; gap: 14px; flex: none; }
.read-draft { font-family: var(--font-tech); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-trace); background: var(--trace); padding: 4px 8px; }
.lang-switch { display: flex; border: var(--rule); }
.lang-switch button { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; background: var(--surface); color: var(--ink-500); border: none; cursor: pointer; transition: color var(--t-fast), background var(--t-fast); }
.lang-switch button + button { border-left: var(--rule); }
.lang-switch button.on { background: var(--structure); color: var(--white); } /* aplat noir = actif */
.lang-switch button:not(.on):hover { color: var(--structure); }
.lang-btn { font-family: var(--font-tech); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; background: var(--surface); color: var(--ink-500); text-decoration: none; display: inline-flex; align-items: center; transition: color var(--t-fast), background var(--t-fast); }
.lang-btn + .lang-btn { border-left: var(--rule); }
.lang-btn.on { background: var(--structure); color: var(--white); }
.lang-btn:not(.on):hover { color: var(--structure); }

/* ---------- en-tête de note ---------- */
.note-shell { max-width: var(--shell-max); margin: 0 auto; }
.note-head { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,92px) var(--gutter) clamp(8px,1.4vw,20px); }
.note-head .nh-label { color: var(--ink-500); display: block; }
.note-head .nh-sig { display: flex; align-items: baseline; gap: 16px; margin: clamp(18px,2.2vw,30px) 0 clamp(16px,2vw,26px); }
.note-head .nh-num { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: clamp(56px,9vw,128px); line-height: 0.8; color: var(--structure); }
.note-head .nh-kind { font-family: var(--font-tech); font-size: 13px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); padding-bottom: 8px; }
.note-head .nh-title { font-family: var(--font-headline); font-weight: 800; text-transform: none; font-size: clamp(32px,5vw,58px); line-height: 1.04; letter-spacing: -0.01em; color: var(--structure); margin: 0; text-wrap: balance; }

/* idée centrale — exergue Merriweather + surlignage jaune (seul jaune de la page).
   Absente au lancement → ce bloc n'est pas rendu (pas de surlignage vide). */
.note-exergue { max-width: 760px; margin: 0 auto; padding: clamp(24px,3vw,40px) var(--gutter); }
.note-exergue p {
  font-family: var(--font-read); font-weight: 400; font-style: italic;
  font-size: clamp(21px,2.6vw,30px); line-height: 1.4; color: var(--structure); margin: 0;
}
.note-exergue .mk {
  font-style: normal; color: var(--structure);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  /* trace de marqueur : basse et imparfaite, ne couvre que le bas du mot */
  background-image: linear-gradient(var(--trace), var(--trace));
  background-repeat: no-repeat; background-size: 100% 0.6em; background-position: 0 92%;
  padding: 0 0.04em;
}

/* ---------- corps de lecture ---------- */
.note-body { max-width: 680px; margin: 0 auto; padding: clamp(20px,3vw,38px) var(--gutter) clamp(40px,5vw,72px); }
.note-body > * { max-width: 100%; }
.note-body p { font-family: var(--font-read); font-size: 18px; line-height: 1.78; color: var(--ink-700); margin: 0 0 1.35em; }
.note-body p.lede-p { font-size: 20px; color: var(--structure); }
.note-body h2 { font-family: var(--font-headline); font-weight: 700; text-transform: none; font-size: clamp(22px,2.6vw,28px); line-height: 1.15; color: var(--structure); margin: clamp(34px,4vw,56px) 0 0.6em; }
.note-body strong, .note-body b { color: var(--structure); font-weight: 700; }
.note-body ul { list-style: none; margin: 0 0 1.35em; padding: 0; }
.note-body ul li { font-family: var(--font-read); font-size: 18px; line-height: 1.7; color: var(--ink-700); padding: 0 0 0 28px; margin: 0 0 0.5em; position: relative; }
.note-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--action-secondary); font-family: var(--font-tech); }
.note-body .pull { font-family: var(--font-headline); font-weight: 700; text-transform: none; font-size: clamp(22px,3vw,32px); line-height: 1.18; color: var(--structure); margin: clamp(30px,4vw,52px) 0; padding-left: 22px; border-left: var(--rule); }
.note-body .note-img { margin: clamp(30px,4vw,52px) 0; }
.note-body .note-img .shot { height: clamp(220px,34vw,400px); }
.note-body .note-img image-slot { filter: grayscale(1); } /* image en N&B, pleine largeur de lecture */
.note-body .note-img .cap { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.note-body .note-img .cap span { font-family: var(--font-tech); font-size: 11px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); }

/* ---------- pied de note ---------- */
.note-foot { max-width: var(--shell-max); margin: 0 auto; }
.note-signoff-wrap { padding: clamp(28px,3.4vw,48px) var(--gutter); border-top: var(--rule); }

.note-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.note-nav a { padding: clamp(24px,3vw,40px) var(--gutter); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; transition: background var(--t-fast); }
.note-nav a:hover { background: var(--ink-100); }
.note-nav a.prev { border-right: var(--rule); }
.note-nav a.next { text-align: right; align-items: flex-end; }
.note-nav .dir { font-family: var(--font-tech); font-size: 12px; letter-spacing: var(--trk-tech); text-transform: uppercase; color: var(--ink-500); }
.note-nav .nn-row { display: flex; align-items: baseline; gap: 12px; }
.note-nav a.next .nn-row { flex-direction: row-reverse; }
.note-nav .nn-num { font-family: var(--font-poster); font-weight: var(--poster-weight); font-size: clamp(28px,4vw,46px); line-height: 0.85; color: var(--ink-300); transition: color var(--t-fast); }
.note-nav a:hover .nn-num { color: var(--structure); }
.note-nav .nn-title { font-family: var(--font-headline); font-weight: 700; text-transform: none; font-size: clamp(16px,1.8vw,21px); line-height: 1.16; color: var(--structure); max-width: 30ch; }
.note-nav .nn-title .u { box-shadow: inset 0 -2px 0 var(--action-secondary); transition: box-shadow var(--t-fast); }
.note-nav a:hover .nn-title .u { box-shadow: inset 0 -0.6em 0 var(--action-secondary); }
.note-nav a.disabled { opacity: 0.4; pointer-events: none; }

/* ---------- bas de page minimal (note) ---------- */
.note-end { max-width: var(--shell-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px var(--gutter); border-top: var(--rule); }
.note-end .left { display: flex; align-items: center; gap: 14px; }

/* ====================================================================
   ENTRÉE (motion plate, rapide — respecte reduced-motion)
   ==================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp 180ms ease-out both; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ====================================================================
   MOBILE
   ==================================================================== */
@media (max-width: 880px) {
  :root { --gutter: 20px; }
  .topnav { display: none; }

  .notes-hero .nh-display { font-size: clamp(38px,11vw,64px); }
  .corpus-stats { grid-template-columns: 1fr 1fr; }
  .corpus-stats .st:last-child { grid-column: 1 / -1; }

  .notes-filter { top: 71px; }

  .somm-block .block-intro { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .somm-row { flex-wrap: wrap; }
  .somm-row .arrow { display: none; }

  .note-nav { grid-template-columns: 1fr; }
  .note-nav a.prev { border-right: none; border-bottom: var(--rule); }
  .note-nav a.next { text-align: left; align-items: flex-start; }
  .note-nav a.next .nn-row { flex-direction: row; }
  .read-draft { display: none; }
}
@media (max-width: 520px) {
  .note-head .nh-sig { gap: 12px; }
  .note-end { flex-direction: column; align-items: flex-start; }
}