/* ============================================================
   LIRE DEBORD — une notion de l'abécédaire, /glossaire/<id>
   (mission notions-gabarit). La forme vient de Lire Marx — trois
   profondeurs, l'essai en questions, le contresens, le quiz — mais
   dans la DA claire : le papier du plan, l'encre, le rouge des
   flèches ; Bricolage pour les titres, Inter pour l'appareil,
   Spectral pour la lecture. Aucune scène, rien qui bouge.
   Les jetons sont ceux de assets/site.css ; le relief du mot et
   « Où » viennent de glossaire.css, chargée avant celle-ci.
   Mise en cache : bumper le ?v= dans notions() de tools/gen-site.mjs.
   ============================================================ */

/* LA GRILLE SE DÉCIDE SUR LA PLACE QU'ELLE A, PAS SUR L'ÉCRAN : la barre
   latérale mange 232 px au-dessus de 900 px, ouverte ou repliée selon le
   lecteur. Une media query ne le sait pas ; une requête de conteneur, si. */
.nt{container:nt / inline-size}
.nt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:start}
.nt-tete,.nt-som,.nt-corps,.nt-app,.nt-suite{min-width:0;max-width:44rem}

/* ---------- la tête : le terme, « En bref », « Ce qu'il faut retenir » ---------- */
.nt-h1{font-family:var(--f-titre);font-weight:800;font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:-.035em;margin:0 0 22px}
.nt-k{font-family:var(--f-ui);font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--fleche-text);margin:0 0 10px;line-height:1.3}
/* la surface d'emphase : un fragment de plan posé sur le papier, filet rouge à gauche */
.nt-bref{background:var(--blanc);border:1px solid var(--border);border-left:4px solid var(--fleche);border-radius:4px 14px 14px 4px;padding:20px 24px 22px}
.nt-bref p{font-family:var(--f-lecture);font-size:1.18rem;line-height:1.6;color:var(--encre);margin:0}
.nt-retenir{margin-top:28px}
.nt-retenir ol{list-style:none;margin:0;padding:0;counter-reset:ret;display:grid;gap:10px}
.nt-retenir li{counter-increment:ret;display:grid;grid-template-columns:2rem minmax(0,1fr);align-items:baseline;font-family:var(--f-lecture);font-size:1.05rem;line-height:1.55;color:var(--encre)}
.nt-retenir li::before{content:counter(ret);font-family:var(--f-titre);font-weight:800;font-size:1rem;color:var(--fleche-text)}

/* ---------- le sommaire de l'essai ---------- */
.nt-som{margin-top:32px;padding:16px 18px 10px;border:1px solid var(--border);border-radius:14px;background:rgba(var(--blanc-rgb),.6)}
.nt-som .nt-k{margin-bottom:6px}
.nt-som-tot{color:var(--muted);letter-spacing:.06em}
.nt-som ol{list-style:none;margin:0;padding:0}
.nt-som li+li{border-top:1px solid var(--border)}
.nt-som a{display:flex;gap:12px;align-items:baseline;min-height:24px;padding:9px 0;color:var(--encre);text-decoration:none;font-size:.95rem;line-height:1.35}
.nt-som a:hover .nt-som-txt{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.nt-som-n{flex:none;width:2.2em;font-family:var(--f-titre);font-weight:800;color:var(--fleche-text)}
.nt-som-txt{flex:1;min-width:0}
.nt-som-min{flex:none;margin-left:auto;padding-left:10px;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- l'essai ---------- */
.nt-essai{margin-top:clamp(36px,5vw,56px)}
.nt-sec{scroll-margin-top:72px}
.nt-sec+.nt-sec{margin-top:2.6em}
.prose .nt-sec h2{margin-top:0;display:flex;gap:.55em;align-items:baseline;font-size:clamp(1.4rem,2.6vw,1.75rem)}
.nt-sec-n{flex:none;font-size:.8em;color:var(--fleche-text)}
/* la réponse : titres + réponses font l'argument, elle se lit un cran au-dessus */
.prose p.nt-lead{font-size:1.2rem;line-height:1.55;color:var(--encre);font-weight:500}

/* les citations : de la revue (libre, liée au passage) et du Spectacle (vérifiée, liée à sa thèse) */
.prose blockquote.nt-cit{margin:1.5em 0;padding:2px 0 2px 22px;border-left:3px solid var(--fleche);font-size:1.04em;line-height:1.55}
.prose blockquote.nt-cit p{margin:0 0 .6em}
.nt-cit footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:10px;font-family:var(--f-ui);font-size:.8rem;line-height:1.45;color:var(--muted)}
.nt-cit cite{font-style:normal}
.nt-cit cite i{font-style:italic}
.prose .nt-cit-l{display:inline-flex;align-items:center;min-height:24px;color:var(--fleche-text);font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;white-space:nowrap}
.prose .nt-cit-l::after{content:"";width:14px;height:9px;margin-left:6px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><path d='M1 6h14M11 2l4 4-4 4' fill='none' stroke='%23b8170a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.prose .nt-cit-l:hover{color:var(--encre)}
.prose blockquote.nt-cit-sds{border-left-color:var(--encre)}

/* l'exemple : un encart de papier blanc, sans couleur */
.nt-ex{margin:1.6em 0;padding:18px 22px 4px;background:var(--blanc);border:1px solid var(--border);border-radius:14px}
.prose .nt-ex p{font-size:1.02rem;line-height:1.62}
.prose .nt-ex p.nt-ex-t{font-family:var(--f-ui);font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--trait);margin:0 0 .7em}
.prose .nt-ex p:last-child{margin-bottom:1em}

/* le contresens : deux temps, l'erreur en retrait, la correction en encre */
.nt-cs{margin:1.6em 0;border:1px solid var(--border-strong);border-radius:14px;overflow:hidden}
.prose .nt-cs p{margin:0;padding:14px 20px 15px;font-size:1.02rem;line-height:1.6}
.prose .nt-cs p.nt-cs-on{background:rgba(var(--encre-rgb),.045);color:var(--trait)}
.prose .nt-cs p.nt-cs-texte{border-top:1px solid var(--border);background:var(--blanc);color:var(--encre)}
.nt-cs-k{display:block;margin-bottom:4px;font-family:var(--f-ui);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.nt-cs-texte .nt-cs-k{color:var(--fleche-text)}

/* ---------- vérifier sa compréhension ---------- */
.nt-quiz{margin-top:clamp(44px,6vw,64px)}
.nt-quiz h2{font-family:var(--f-titre);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;margin:0 0 12px}
.nt-quiz details{border-top:1px solid var(--border-strong)}
.nt-quiz details:last-of-type{border-bottom:1px solid var(--border-strong)}
.nt-quiz summary{list-style:none;cursor:pointer;position:relative;padding:15px 36px 15px 0;font-family:var(--f-lecture);font-size:1.08rem;line-height:1.45;color:var(--encre)}
.nt-quiz summary::-webkit-details-marker{display:none}
.nt-quiz summary::after{content:"";position:absolute;right:8px;top:22px;width:9px;height:9px;border-right:2px solid var(--fleche);border-bottom:2px solid var(--fleche);transform:rotate(45deg)}
.nt-quiz details[open] summary::after{transform:rotate(-135deg);top:26px}
.nt-quiz summary:hover{color:var(--fleche-text)}
.nt-quiz summary:focus-visible{outline:2px solid var(--fleche);outline-offset:2px}
.nt-quiz-r p{margin:0 0 18px;font-family:var(--f-lecture);font-size:1rem;line-height:1.65;color:var(--trait)}

/* ---------- l'appareil ---------- */
.nt-app{display:grid;gap:16px;margin-top:clamp(40px,6vw,64px)}
.nt-bloc{background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.nt-h{font-family:var(--f-titre);font-weight:800;font-size:1rem;letter-spacing:-.015em;line-height:1.2;margin:0 0 10px}
.nt-def{font-family:var(--f-lecture);font-size:.98rem;line-height:1.55;color:var(--encre);margin:0 0 10px}
.nt-note{font-size:.82rem;line-height:1.45;color:var(--muted);margin:-4px 0 8px}
.nt-liste{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.nt-liste li{font-size:.92rem;line-height:1.4}
.nt-liste a{display:inline-block;padding:5px 0;color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-decoration-thickness:1.5px;text-underline-offset:3px}
.nt-liste a:hover{color:var(--fleche-text)}
.nt-liste small{color:var(--muted);font-size:.78rem;margin-left:4px}
.nt-lire li+li{margin-top:6px}
.nt-lire p{margin:2px 0 0;font-size:.84rem;line-height:1.45;color:var(--trait)}
.nt-app .gl-ou{margin-bottom:4px}

/* ---------- précédente / suivante ---------- */
.nt-suite{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);padding-top:24px;border-top:1px solid var(--border)}
.nt-tous{font-size:.86rem;color:var(--trait);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.nt-tous:hover{color:var(--fleche-text)}

/* ---------- deux colonnes quand la place le permet ----------
   La tête et l'essai à gauche ; le sommaire en face de la tête, l'appareil en
   face de l'essai. Rien n'est collant : l'appareil est plus long que l'écran,
   et un bloc collant plus haut que l'écran cache sa propre fin. */
@container nt (min-width: 900px){
  .nt-grid{grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(36px,4vw,64px);grid-template-areas:"tete som" "corps app" "suite suite"}
  .nt-tete{grid-area:tete}
  .nt-som{grid-area:som;margin-top:0;align-self:start}
  .nt-corps{grid-area:corps}
  .nt-app{grid-area:app;margin-top:clamp(36px,5vw,56px)}
  .nt-suite{grid-area:suite;max-width:none}
}
@media(max-width:520px){
  .nt-bref{padding:16px 18px 18px}
  .nt-bref p{font-size:1.1rem}
  .nt-suite .btn{padding:12px 16px}
}