/* ============================================================
   /guy-debord — la page-pilier sur l'homme (mission guy-debord).
   Aucune image : typographie, fragments de plan dessinés à la
   génération (tools/gen-site.mjs, gdFragment), flèches de dérive.
   Fichier mis en cache : un changement se bumpe dans le ?v= de
   guyDebord() (tools/gen-site.mjs).
   ============================================================ */

/* ---------- le héros ---------- */
.gd-heros{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:start}
@media(min-width:1180px){.gd-heros{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.gd-h1{font-family:var(--f-titre);font-weight:800;font-size:clamp(3rem,8.4vw,6.6rem);line-height:.9;letter-spacing:-.05em;margin:0 0 14px}
.gd-ans{display:flex;align-items:center;gap:12px;margin:0 0 22px;font-family:var(--f-titre);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.02em;color:var(--encre)}
.gd-ans-f{flex:0 1 220px;min-width:80px;height:auto;overflow:visible}
.gd-ans-f path{fill:none;stroke:var(--fleche);stroke-width:3;stroke-linecap:round}
.gd-ans-f polygon{fill:var(--fleche)}
.gd-def{font-family:var(--f-lecture);font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.5;color:var(--encre);max-width:40ch;margin:0 0 22px}
.gd-fiche{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0 0 22px;font-size:.92rem;line-height:1.45;max-width:58ch}
.gd-fiche dt{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.gd-fiche dd{margin:0;color:var(--trait)}
.gd-fiche a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-underline-offset:3px}
.gd-fiche a:hover{color:var(--fleche-text)}
.gd-pas{font-size:.84rem;line-height:1.5;color:var(--muted);border-left:2px solid var(--border-strong);padding:2px 0 2px 12px;margin:0 0 22px;max-width:52ch}
.gd-som{display:flex;flex-wrap:wrap;gap:8px}
.gd-som a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--border-strong);border-radius:999px;font-size:.86rem;font-weight:500;color:var(--encre);text-decoration:none}
.gd-som a:hover{background:rgba(var(--encre-rgb),.05);border-color:var(--encre)}

/* le plan de la vie */
.gd-heros-c{margin:0;min-width:0}
.gd-carte{display:block;width:100%;height:auto;overflow:visible}
.gd-carte-a{cursor:pointer}
.gd-carte-a:focus{outline:none}
.gd-carte-a:hover .gd-pl-bord,.gd-carte-a:focus-visible .gd-pl-bord{stroke:var(--fleche);stroke-width:3}
.gd-fl path{fill:none;stroke:var(--fleche);stroke-width:7;stroke-linecap:round}
.gd-fl polygon{fill:var(--fleche)}
/* LE TRACÉ DU HÉROS EST EN TEMPS : il est au-dessus du pli, la position n'y
   bougerait pas (le cas du héros de l'accueil et du profil du corpus). Une
   animation CSS, pas un script : l'état fini est celui de la feuille, et
   no-motion (posé par le script de tête) le rend tout de suite. */
@keyframes gd-trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gd-pose{from{opacity:0}to{opacity:1}}
html:not(.no-motion) .gd-fl path,html:not(.no-motion) .gd-ans-f path{stroke-dasharray:1;animation:gd-trace .7s var(--ease) both;animation-delay:calc(.3s + var(--i,0) * .17s)}
html:not(.no-motion) .gd-fl polygon,html:not(.no-motion) .gd-ans-f polygon{animation:gd-pose .2s linear both;animation-delay:calc(.9s + var(--i,0) * .17s)}
.gd-ans-f{--i:-1}

.gd-leg{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 16px}
.gd-leg a{display:flex;align-items:baseline;gap:8px;padding:6px 0;min-height:28px;text-decoration:none;color:var(--encre);font-size:.88rem;line-height:1.3}
.gd-leg b{font-family:var(--f-titre);font-weight:800;color:var(--fleche-text);min-width:2.4em}
.gd-leg small{margin-left:auto;font-size:.76rem;color:var(--muted);white-space:nowrap}
.gd-leg a:hover span{text-decoration:underline;text-decoration-color:var(--fleche);text-underline-offset:3px}

/* les fragments de plan (héros et tableaux) */
.gd-pl-ombre{fill:rgba(var(--ombre-rgb),.12)}
.gd-pl-fond{fill:var(--blanc)}
.gd-pl-rues{fill:none;stroke:var(--trait);stroke-opacity:.34;stroke-width:.8}
.gd-pl-bd{fill:none;stroke:var(--encre);stroke-opacity:.42;stroke-width:3.4}
.gd-pl-bord{fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linejoin:round}
.gd-pl-n{font-family:var(--f-titre);font-weight:800;font-size:34px;text-anchor:middle;fill:var(--encre);stroke:var(--blanc);stroke-width:7px;paint-order:stroke;stroke-linejoin:round;letter-spacing:-.02em}

/* ---------- les sections ---------- */
.gd-s{margin-top:clamp(72px,10vw,128px);scroll-margin-top:72px}
.gd-s .sec-lede a,.gd-sources a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-underline-offset:3px}
.gd-s .sec-lede a:hover{color:var(--fleche-text)}
.gd-t-b{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}

/* ---------- sa vie : les tableaux, et la dérive qui les relie ---------- */
.gd-vie{position:relative;display:grid;gap:clamp(48px,7vw,84px);margin-top:clamp(32px,5vw,52px)}
.gd-derive{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
.gd-derive path{fill:none;stroke:var(--fleche);stroke-width:5;stroke-linecap:round}
.gd-derive polygon{fill:var(--fleche);transition:opacity .15s}
.gd-t{position:relative;z-index:1;display:grid;grid-template-columns:160px minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:start;scroll-margin-top:72px}
.gd-t-fig svg{display:block;width:100%;height:auto;overflow:visible}
.gd-t-ans{margin:6px 0 0;text-align:center;font-family:var(--f-titre);font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:var(--encre);background:var(--papier)}
.gd-t-c{min-width:0;max-width:68ch}
.gd-t-k{margin:0 0 6px;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fleche-text)}
.gd-t-h{font-family:var(--f-titre);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.gd-t-x{font-family:var(--f-lecture);font-size:1.08rem;line-height:1.62;margin:0 0 16px}
.gd-t-src{font-size:.8rem;line-height:1.5;color:var(--muted);margin:14px 0 0}
.gd-t-src a{color:var(--trait);text-decoration:underline;text-underline-offset:3px}
.gd-t-src a:hover{color:var(--fleche-text)}
.gd-dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);font-size:.88rem}
.gd-dates li{border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.gd-dates a{display:flex;gap:12px;align-items:baseline;padding:7px 0;min-height:24px;color:var(--encre);text-decoration:none;flex:1 1 300px;min-width:0}
.gd-dates time{flex:none;width:9.6em;font-weight:600;color:var(--trait);font-variant-numeric:tabular-nums}
.gd-dates a:hover span{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.gd-div{font-size:.74rem;color:var(--fleche-text);padding-bottom:6px}
.gd-nums{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gd-nums a{display:inline-flex;gap:6px;align-items:baseline;min-height:30px;padding:5px 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--blanc);font-size:.8rem;text-decoration:none;color:var(--encre)}
.gd-nums b{font-family:var(--f-titre);font-weight:800}
.gd-nums span{color:var(--muted)}
.gd-nums a:hover{border-color:var(--fleche)}
.gd-cite{margin:0 0 16px;padding:2px 0 2px 18px;border-left:3px solid var(--fleche);font-family:var(--f-lecture);font-size:1.1rem;line-height:1.5}
.gd-cite p{margin:0}
.gd-cite p a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:4px}
.gd-cite p a:hover{text-decoration-color:var(--fleche)}
.gd-cite .src{font-family:var(--f-ui);font-size:.8rem;color:var(--muted);margin-top:8px;display:block}
.gd-coda{margin-top:clamp(48px,7vw,84px);padding:clamp(20px,3vw,28px);border:1px solid var(--border-strong);border-radius:14px;background:var(--blanc);max-width:860px;scroll-margin-top:72px}
.gd-coda .gd-t-x{max-width:66ch}
@media(max-width:640px){
  .gd-t{grid-template-columns:76px minmax(0,1fr);gap:16px}
  .gd-t-ans{font-size:.78rem}
  .gd-dates a{flex-direction:column;gap:1px;flex-basis:100%}
  .gd-dates time{width:auto;font-size:.8rem}
}

/* ---------- l'œuvre dans l'ordre ---------- */
.gd-oe{list-style:none;margin:clamp(28px,4vw,40px) 0 0;padding:0;max-width:1080px}
@media(min-width:1000px){.gd-oe{columns:2;column-gap:48px}}
.gd-oe li{break-inside:avoid;display:grid;grid-template-columns:3.6em minmax(0,1fr);column-gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.gd-oe-an{grid-row:span 2;font-family:var(--f-titre);font-weight:800;font-size:1.05rem;color:var(--fleche-text);font-variant-numeric:tabular-nums}
.gd-oe a,.gd-oe li>span:not(.gd-oe-an){font-family:var(--f-titre);font-weight:600;font-size:1.02rem;line-height:1.3;letter-spacing:-.01em;color:var(--encre);text-decoration:none;padding:2px 0}
.gd-oe a:hover{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}
.gd-oe small{font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:3px}

/* ---------- les idées ---------- */
.gd-is{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:18px;margin-top:clamp(28px,4vw,40px)}
.gd-i{background:var(--blanc);border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column}
.gd-i-h{font-family:var(--f-titre);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;margin:0 0 8px}
.gd-i-h a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-decoration-thickness:2px;text-underline-offset:4px}
.gd-i-d{font-family:var(--f-lecture);font-size:1rem;line-height:1.55;margin:0 0 14px}
.gd-i .gd-cite{font-size:.98rem}
.gd-i-s{margin:auto 0 0;font-size:.86rem}
.gd-i-s a{display:inline-block;padding:4px 0;color:var(--fleche-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- les questions ---------- */
.gd-qs{margin-top:clamp(24px,4vw,36px);max-width:860px;border-top:1px solid var(--border-strong)}
.gd-q{border-bottom:1px solid var(--border-strong)}
.gd-q summary{list-style:none;cursor:pointer;position:relative;padding:16px 40px 16px 0}
.gd-q summary::-webkit-details-marker{display:none}
.gd-q summary h3{margin:0;font-family:var(--f-titre);font-weight:600;font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.3;letter-spacing:-.01em}
.gd-q summary::after{content:"";position:absolute;right:6px;top:50%;width:18px;height:12px;margin-top:-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 6h12M9 2l4 4-4 4' fill='none' stroke='%23d8200a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");transition:transform .2s var(--ease)}
.gd-q[open] summary::after{transform:rotate(90deg)}
.gd-q summary:hover h3{color:var(--fleche-text)}
.gd-q-r{padding:0 0 18px}
.gd-q-r p{font-family:var(--f-lecture);font-size:1.05rem;line-height:1.6;margin:0 0 10px;max-width:66ch}
.gd-q-r p.gd-t-src{font-family:var(--f-ui);font-size:.8rem}
.gd-q-r a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-underline-offset:3px}
.gd-q-r a:hover{color:var(--fleche-text)}

/* ---------- par où commencer ---------- */
.gd-portes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:clamp(24px,4vw,36px)}
/* la revue d'abord, sur toute la largeur : c'est la seule porte où l'on lit
   Debord en entier ; ses huit entrées en deux colonnes, les deux autres portes dessous */
@media(min-width:760px){.gd-portes{grid-template-columns:1fr 1fr}.gd-p:first-child{grid-column:1/-1}.gd-ent{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}}
.gd-p{border:1px solid var(--border-strong);border-radius:14px;padding:22px;background:var(--blanc);display:flex;flex-direction:column}
.gd-p h3{font-family:var(--f-titre);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin:0 0 6px}
.gd-p>p{font-size:.94rem;color:var(--trait);margin:0}
.gd-p .gd-t-b{margin-top:auto;padding-top:18px}
.gd-ent{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--border)}
.gd-ent a{display:block;padding:8px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--encre)}
.gd-e-t{font-family:var(--f-titre);font-weight:600;font-size:.98rem;line-height:1.3;display:block}
.gd-ent small{font-size:.78rem;color:var(--muted)}
.gd-ent a:hover .gd-e-t{color:var(--fleche-text);text-decoration:underline;text-underline-offset:3px}

/* ---------- les sources ---------- */
.gd-sources{font-size:.86rem;line-height:1.55;color:var(--muted);max-width:76ch;border-top:1px solid var(--border);padding-top:20px}
.gd-sources-h{font-family:var(--f-titre);font-weight:800;font-size:1.05rem;color:var(--encre);margin:0 0 8px}
.gd-sources p{margin:0}