/* SPDX-FileCopyrightText: 2026 Sébastien Vidotto (Heteractis) */
/* SPDX-License-Identifier: AGPL-3.0-or-later */
/*
  Direction artistique : un carnet d'inventeur de la Renaissance, revisité à l'ère de l'IA.
  Papier vélin, encre sépia, annotations en marge, croquis au trait ; par-dessus, un réseau de synapses en bleu électrique.
  Les pages de l'abbaye ralentissent : ciel bleu, nuages, beaucoup d'air.
  Tout est dessiné en CSS et en SVG ; polices incluses en local (licence SIL OFL, voir LICENSES/).
*/
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* atelier, de jour : vélin, encre sépia, bleu électrique */
  --papier: #f1e6cb;
  --papier2: #e8d9b6;
  --encre: #33261a;
  --sepia: #6a4f33;
  --bleu: #0b4bc4;
  --bleu-vif: #1f6bff;
  --impulsion: #1f9bff;
  --filet: #b9a57c;
  --halo: rgba(31, 107, 255, 0.16);
  --ciel-haut: #bcddf5;
  --ciel-bas: #f2f8fc;
  --texte-bouton: #ffffff;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --carnet: url("decor/carnet.svg");
  --carnet-opacite: 0.55;
  --lampe: none;
  --titre: "IM Fell English", "Iowan Old Style", Palatino, Georgia, serif;
  --corps: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --main: "Caveat", "Segoe Script", "Bradley Hand", cursive;
}
/* l'abbaye : plus clair, plus calme */
body.abbaye {
  --papier: #eef5fa;
  --papier2: #dbe9f4;
  --encre: #26323f;
  --sepia: #465668;
  --filet: #9db4c8;
  --bleu-vif: #2a78e6;
  --impulsion: #4aa8ff;
  --halo: rgba(42, 120, 230, 0.1);
}
/* la nuit à l'atelier */
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0e1727;
    --papier2: #16233a;
    --encre: #efe4cc;
    --sepia: #d0b98c;
    --bleu: #8cc4ff;
    --bleu-vif: #46c2ff;
    --impulsion: #bfeaff;
    --filet: #3d4d69;
    --halo: rgba(70, 194, 255, 0.2);
    --ciel-haut: #1d3358;
    --ciel-bas: #3a5985;
    --texte-bouton: #0e1727;
    --grain: none;
    --carnet: url("decor/carnet-nuit.svg");
    --carnet-opacite: 0.4;
    --lampe: radial-gradient(circle at 10% -5%, rgba(255, 190, 110, 0.14), transparent 38%);
  }
  body.abbaye {
    --papier: #152238;
    --papier2: #1e3150;
    --encre: #e6ecf4;
    --sepia: #bccadb;
    --filet: #44597a;
    --bleu-vif: #5cb6ff;
    --impulsion: #d4efff;
    --halo: rgba(92, 182, 255, 0.16);
  }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.1rem;
  line-height: 1.62;
  background: var(--lampe), var(--grain), radial-gradient(ellipse 130% 90% at 50% 0%, var(--papier), var(--papier2)) var(--papier);
}
body.abbaye {
  line-height: 1.8;
  background: linear-gradient(var(--ciel-haut) 0, var(--papier) 26rem) var(--papier);
}
a { color: var(--bleu); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 3px; border-radius: 2px; }
.evitement { position: absolute; left: 1rem; top: -4rem; background: var(--bleu); color: var(--texte-bouton); padding: 0.5rem 1rem; z-index: 10; }
.evitement:focus { top: 0.5rem; }

.entete, .ariane, .hero, .bandeau, main, .pied { max-width: 60rem; margin-inline: auto; padding-inline: 1rem; }

/* en-tête */
.entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem;
  padding-block: 1rem 0.6rem;
}
.marque { font-family: var(--titre); font-size: 2rem; text-decoration: none; color: var(--encre); letter-spacing: 0.01em; }
.marque .sous { font-family: var(--main); font-size: 1.5rem; color: var(--bleu); margin-left: 0.2em; }
.entete ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; font-size: 1rem; }
.entete a[aria-current="page"] { color: var(--encre); text-decoration: none; border-bottom: 2px solid var(--bleu-vif); }

/* chemin parcouru */
.ariane { padding-block: 0.4rem 0; font-size: 0.95rem; font-style: italic; color: var(--sepia); }
.ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ariane li + li::before { content: "›"; margin: 0 0.5em; color: var(--bleu-vif); font-style: normal; }
.ariane [aria-current] { color: var(--encre); font-style: normal; }

/* la carte : synapses, chemin lumineux, branches */
.hero { position: relative; padding-block: 0.25rem 0; }
.hero::before {
  content: ""; position: absolute; inset: 0 1rem; background: var(--carnet) 100% 50% / auto 118% no-repeat;
  opacity: var(--carnet-opacite); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}
.synapses { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.synapses .fin { fill: none; stroke: var(--bleu-vif); stroke-width: 0.8; opacity: 0.32; }
.synapses .gn { fill: var(--bleu-vif); opacity: 0.5; }
.synapses .halo { fill: none; stroke: var(--bleu-vif); stroke-width: 8; stroke-linecap: round; opacity: 0.13; }
.synapses .vif, .synapses .doux, .synapses .pale { fill: none; stroke: var(--bleu-vif); stroke-linecap: round; }
.synapses .vif { stroke-width: 2.4; }
.synapses .doux { stroke-width: 1.6; opacity: 0.8; }
.synapses .pale { stroke-width: 1.2; opacity: 0.45; stroke-dasharray: 3 6; }
.synapses .vif, .synapses .doux { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 1.8s ease-out var(--d, 0s) forwards; }
.synapses .impulsion { fill: none; stroke: var(--impulsion); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0.045 0.955; stroke-dashoffset: 0; opacity: 0; animation: impulsion 7s linear var(--d, 2s) infinite; }
.synapses .impulsion.lent { animation-duration: 10s; stroke-width: 2.6; }
.synapses .noeud { stroke: var(--bleu-vif); stroke-width: 1.6; fill: var(--papier); }
.synapses .noeud.cur, .synapses .noeud.fille { fill: var(--bleu-vif); }
.synapses .noeud.vide { stroke-dasharray: 2.2 2.2; }
.synapses .halo-noeud { fill: var(--bleu-vif); opacity: 0.18; }
.synapses .respire { transform-box: fill-box; transform-origin: center; animation: respire 6s ease-in-out infinite; }
.synapses .note { font-family: var(--main); font-size: 21px; fill: var(--encre); }
.synapses .note.petite { font-size: 18px; fill: var(--sepia); }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes impulsion { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes respire { 0%, 100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) {
  .synapses .vif { filter: drop-shadow(0 0 3px var(--bleu-vif)); }
  .synapses .note { fill: var(--encre); }
}

/* l'abbaye : un ciel, des nuages qui dérivent à peine, un croquis d'abbaye */
.hero-abbaye::before { display: none; }
.hero-abbaye { margin-top: 0.5rem; }
.ciel { position: absolute; inset: 0.25rem 1rem 0; width: calc(100% - 2rem); height: calc(100% - 0.25rem); border-radius: 0.6rem; }
.ciel .nuage { fill: #fff; opacity: 0.85; }
.ciel .nuage > g { animation: derive var(--t, 160s) ease-in-out infinite alternate; }
.ciel .croquis-abbaye { stroke: var(--sepia); stroke-width: 1.4; opacity: 0.8; }
.ciel .oiseau { stroke-width: 1.2; }
@media (prefers-color-scheme: dark) { .ciel .nuage { fill: #9db6d8; opacity: 0.35; } }
@keyframes derive { to { transform: translate(var(--x, 50px), 0); } }
.synapses.abbaye .vif { stroke-width: 2; opacity: 0.85; }
.synapses.abbaye .impulsion { animation-duration: 16s; }
.synapses.abbaye .impulsion.lent { animation-duration: 22s; }
.synapses.abbaye .respire { animation-duration: 11s; }
.synapses.abbaye .note { fill: var(--encre); }

/* bandeau : on peut se tromper, on peut corriger */
.bandeau { margin-top: 0.75rem; }
.bandeau > p, .bandeau > details {
  margin: 0; padding: 0.55rem 0.9rem; font-size: 1rem; background: var(--papier2);
  border-left: 3px solid var(--bleu-vif); max-width: 52rem;
}
.bandeau > p { padding-bottom: 0.1rem; }
.bandeau > details { padding-top: 0.1rem; }
.bandeau p { margin: 0.25rem 0; }
.bandeau summary { cursor: pointer; color: var(--bleu); }
.bandeau code { font-size: 0.85em; }

/* contenu */
main { padding-block: 1rem 3rem; }
body.abbaye main { padding-block: 2rem 4rem; }
h1 { font-family: var(--titre); font-weight: 400; font-size: 2.8rem; line-height: 1.08; margin: 0.4rem 0 0.4rem; letter-spacing: 0.005em; }
h2 { font-family: var(--titre); font-weight: 400; font-size: 1.6rem; line-height: 1.2; margin: 2.2rem 0 0.4rem; }
h2::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--bleu-vif); margin-right: 0.55em; vertical-align: 0.08em; box-shadow: 0 0 0 0.28em var(--halo); }
h3 { font-family: var(--titre); font-style: italic; font-weight: 400; font-size: 1.25rem; margin: 1.5rem 0 0.2rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; align-items: center; margin: 0 0 1rem; font-size: 0.95rem; font-style: italic; color: var(--sepia); }
.resume { font-family: var(--titre); font-style: italic; font-size: 1.25rem; color: var(--sepia); margin: 0 0 1.2rem; line-height: 1.4; }
p, li { max-width: 36rem; }
ul, ol { padding-left: 1.4rem; }
li { margin: 0.25rem 0; }
blockquote { margin: 1rem 0; padding: 0.05rem 1.1rem; border-left: 2px solid var(--bleu-vif); font-style: italic; color: var(--sepia); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8em; background: var(--papier2); padding: 0.1em 0.3em; border-radius: 3px; overflow-wrap: anywhere; }
pre { background: var(--papier2); padding: 0.75rem 1rem; overflow-x: auto; border-left: 2px solid var(--filet); max-width: 100%; }
pre code { background: none; padding: 0; }
.tableau { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; font-size: 1rem; min-width: 20rem; }
th, td { border-bottom: 1px solid var(--filet); padding: 0.4rem 0.7rem 0.4rem 0; text-align: left; vertical-align: top; }
thead th { font-family: var(--titre); font-style: italic; font-weight: 400; border-bottom: 2px solid var(--sepia); }

.etat { display: inline-block; font-size: 0.82rem; font-style: normal; padding: 0 0.6em; border: 1px solid; border-radius: 99px; line-height: 1.55; vertical-align: 0.1em; }
.etat-ok { color: var(--bleu); border-color: var(--bleu); }
.etat-att { color: var(--sepia); border-style: dashed; }

/* branches : des fils qui relient les nœuds */
.fils { list-style: none; margin: 1rem 0 0 0.6rem; padding: 0 0 0 1.7rem; position: relative; }
.fils::before { content: ""; position: absolute; left: 0; top: 0.9rem; bottom: 1.2rem; border-left: 2px solid var(--bleu-vif); opacity: 0.5; }
.noeud-fil { position: relative; margin: 0 0 1.1rem; max-width: none; }
.noeud-fil::before { content: ""; position: absolute; left: -1.7rem; top: 0.9rem; width: 1.15rem; border-top: 2px solid var(--bleu-vif); opacity: 0.5; }
.noeud-fil::after { content: ""; position: absolute; left: -0.62rem; top: 0.62rem; width: 0.62rem; height: 0.62rem; border-radius: 50%; border: 2px solid var(--bleu-vif); background: var(--papier); box-sizing: content-box; }
.noeud-fil.ok::after { background: var(--bleu-vif); box-shadow: 0 0 0 0.25em var(--halo); }
.noeud-fil.att::after { border-style: dashed; }
.noeud-fil > a { font-weight: 600; font-size: 1.15rem; }
.noeud-fil p { margin: 0.1rem 0 0; font-size: 1rem; color: var(--sepia); }
.adeplier { padding: 0.8rem 1.1rem; border: 1px dashed var(--sepia); background: repeating-linear-gradient(135deg, transparent 0 7px, var(--halo) 7px 8px); max-width: 36rem; }
.adeplier p { margin: 0.4rem 0; }
.voisines ul { columns: 2 15rem; padding-left: 1.2rem; font-size: 1rem; max-width: none; }
.voisines [aria-current] { font-weight: 600; }
.plan, .plan ul { list-style: none; padding-left: 1.2rem; border-left: 1px solid var(--bleu-vif); }
.plan { border-left: 0; padding-left: 0; }
.plan li { max-width: none; margin: 0.2rem 0; font-size: 1rem; }

/* gloses et notes en marge, écrites à la main */
.marge { font-family: var(--main); font-size: 1.3rem; line-height: 1.3; color: var(--sepia); border-left: 2px solid var(--bleu-vif); padding-left: 1rem; margin: 1.5rem 0; }
.marge h2 { font-size: 1.2rem; margin: 0.2rem 0 0.2rem; }
.marge h2::before { width: 0.4em; height: 0.4em; box-shadow: none; }
.marge ul { padding-left: 1.1rem; }
.marge li, .marge p { max-width: none; margin: 0.4rem 0; }
.marge a { color: var(--bleu); }
.marge .averifier { color: var(--sepia); }

.avert { padding: 0.6rem 0.9rem; background: var(--papier2); border-left: 3px solid var(--bleu-vif); font-size: 1rem; }
textarea { width: 100%; max-width: 100%; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; line-height: 1.45; background: var(--papier2); color: var(--encre); border: 1px solid var(--filet); border-radius: 3px; padding: 0.6rem; resize: vertical; }
button { font: inherit; font-size: 1rem; cursor: pointer; background: var(--bleu); color: var(--texte-bouton); border: 2px solid var(--bleu); border-radius: 3px; padding: 0.3rem 0.95rem; min-height: 2.6rem; }
button:hover { filter: brightness(1.12); }
button[hidden] { display: none; }
.copie-etat { font-size: 0.95rem; color: var(--sepia); margin-left: 0.5rem; font-style: italic; }
.pied { padding-block: 1.5rem 3rem; font-size: 0.9rem; color: var(--sepia); border-top: 1px solid var(--filet); margin-top: 2rem; }
.pied p { max-width: 50rem; }

/* en grand écran : les annotations passent dans la marge, comme dans un carnet */
@media (min-width: 70rem) {
  article { display: grid; grid-template-columns: minmax(0, 36rem) 15rem; column-gap: 3rem; align-items: start; }
  article > * { grid-column: 1; }
  article > .marge { grid-column: 2; grid-row: 4 / span 40; margin-top: 0; position: sticky; top: 1rem; }
}
@media (max-width: 32rem) {
  html { font-size: 106.25%; }
  h1 { font-size: 2.2rem; }
  .marque { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .synapses .vif, .synapses .doux { stroke-dashoffset: 0; }
  .synapses .impulsion { display: none; }
}
@media print {
  .entete ul, .bandeau, .evitement, button, textarea, .hero { display: none; }
  body { background: #fff; color: #000; }
}

/* fiches typées : type et « à relier » */
.type { color: var(--sepia); font-style: italic; }
.arelier ul { max-width: none; }
.arelier li { max-width: none; }
.arelier h3 { margin-top: 1rem; }

/* graphe des nœuds */
.graphe-barre { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin: 0.5rem 0; font-size: 1rem; }
.graphe-barre input[type="search"] { font: inherit; font-size: 1rem; padding: 0.3rem 0.6rem; border: 1px solid var(--sepia); background: var(--papier2); color: var(--encre); border-radius: 3px; min-height: 2.4rem; }
.graphe-cadre { background: var(--papier2); border: 1px solid var(--filet); }
#graphe { display: block; width: 100%; height: auto; max-height: 80vh; }
#graphe .g-lien { stroke: var(--sepia); stroke-width: 0.8; opacity: 0.5; }
#graphe .g-transverse { stroke: var(--bleu-vif); stroke-width: 1.4; opacity: 0.8; }
#graphe.seulement-transverses .g-arbre { display: none; }
#graphe .g-lien.chaud { stroke: var(--bleu-vif); opacity: 1; stroke-width: 2; }
#graphe .g-lien.tamise { opacity: 0.08; }
#graphe .g-noeud circle { stroke: var(--encre); stroke-width: 1; }
#graphe .g-noeud.vide circle { fill-opacity: 0.35; stroke-dasharray: 2 2; }
#graphe .g-noeud.tamise { opacity: 0.2; }
#graphe .g-noeud.trouve circle, #graphe .g-noeud.chaud circle { stroke: var(--bleu-vif); stroke-width: 3; }
#graphe .g-nom { font-family: var(--main); font-size: 15px; fill: var(--encre); display: none; paint-order: stroke; stroke: var(--papier2); stroke-width: 3px; }
#graphe .g-nom.visible { display: block; }
#graphe .g-noeud:hover .g-nom, #graphe .g-noeud:focus .g-nom, #graphe .g-noeud.chaud .g-nom, #graphe .g-noeud.trouve .g-nom { display: block; }
#graphe .g-noeud:focus-visible { outline: none; }
#graphe .g-noeud:focus-visible circle { stroke: var(--bleu-vif); stroke-width: 4; }
.g-b-racine circle, .g-b-racine svg circle { fill: #8a6d3b; }
.g-b-humaine circle, .g-b-humaine svg circle { fill: #d98a6c; }
.g-b-societes circle, .g-b-societes svg circle { fill: #c9a24a; }
.g-b-informatique circle, .g-b-informatique svg circle { fill: #4a8fe0; }
.g-b-philosophie circle, .g-b-philosophie svg circle { fill: #9a7fc4; }
.g-b-animale-et-vivant circle, .g-b-animale-et-vivant svg circle { fill: #6bb08a; }
.g-b-oubli circle, .g-b-oubli svg circle { fill: #9aa4b0; }
.g-b-droit-et-ethique circle, .g-b-droit-et-ethique svg circle { fill: #c46f9a; }
.g-b-terre circle, .g-b-terre svg circle { fill: #7a8f4a; }
#graphe-legende { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; font-size: 0.95rem; max-width: none; }
#graphe-legende li { margin: 0; max-width: none; }
#graphe-legende svg { vertical-align: -1px; stroke: var(--encre); stroke-width: 1; }

/* variante B de l'accueil : une planche */
.planche { position: relative; max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
.planche svg { display: block; width: 100%; height: auto; }
.planche .branche-lien { fill: none; stroke: var(--bleu-vif); stroke-width: 2; stroke-linecap: round; opacity: 0.85; }
.planche .branche-noeud circle { fill: var(--papier); stroke: var(--bleu-vif); stroke-width: 2; }
.planche a:hover .branche-noeud circle, .planche a:focus-visible .branche-noeud circle { fill: var(--bleu-vif); }
.planche text { font-family: var(--main); font-size: 26px; fill: var(--encre); }
.planche .coeur { fill: var(--bleu-vif); }
.planche .cerveau { fill: none; stroke: var(--sepia); stroke-width: 1.6; opacity: 0.8; }
.planche .pulse { fill: none; stroke: var(--impulsion); stroke-width: 3; stroke-dasharray: 0.04 0.96; animation: impulsion 9s linear infinite; opacity: 0; }
.bandeau-variante { background: var(--bleu); color: var(--texte-bouton); padding: 0.4rem 1rem; text-align: center; font-size: 1rem; }
.bandeau-variante a { color: inherit; }

/* la carte d'en-tête : carte mentale recentrée, cartouches lisibles, panneau de lecture */
.hero-graphe { position: relative; }
.hero-graphe svg.synapses { width: 100%; height: auto; }
.hero-liste { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; }
.hero-liste:focus-within { position: absolute; z-index: 6; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; top: 0.3rem; left: 1rem; right: 1rem; background: var(--papier2); border: 2px solid var(--bleu-vif); padding: 0.5rem 0.8rem; margin: 0; }
.hero-liste ul { padding-left: 1.2rem; max-width: none; columns: 2 14rem; margin: 0.2rem 0; }
.hero-liste[hidden] { display: none; }
@media (scripting: none) { .hero-liste { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0; padding: 0.3rem 0; } }
.synapses .halo, .synapses .impulsion, .synapses .halo-cart, .synapses .fin, .synapses .gn { pointer-events: none; }
.hero-svg { view-transition-name: carte; }
.hero-svg.rerendu .vif, .hero-svg.rerendu .doux { animation: none; stroke-dashoffset: 0; }
.hero-svg .g-noeud { cursor: pointer; }
.hero-svg .g-noeud:focus { outline: none; }
.hero-svg .cart rect { fill: var(--papier); stroke: var(--filet); stroke-width: 1.2; }
.hero-svg .cart.vide rect { stroke-dasharray: 4 3; stroke: var(--sepia); }
.hero-svg .cart.centre rect { stroke: var(--bleu-vif); stroke-width: 2.4; fill: var(--papier2); }
.hero-svg .lib { font-family: var(--main); font-size: 19px; fill: var(--encre); }
.hero-svg .cart.centre .lib { font-size: 23px; font-weight: 500; }
.hero-svg .compte { font-family: var(--corps); font-size: 13px; font-weight: 600; fill: var(--papier); pointer-events: none; }
.hero-svg .noeud.avec { stroke-width: 2; }
.hero-svg .halo-cart { fill: var(--bleu-vif); opacity: 0.16; }
.hero-svg .g-noeud:hover .cart rect, .hero-svg .g-noeud:focus-visible .cart rect, .hero-svg .g-noeud.sel .cart rect { stroke: var(--bleu-vif); stroke-width: 2.4; }
.hero-svg .g-noeud:focus-visible .cart rect { stroke-width: 3.6; }
.hero-svg .g-noeud:hover circle.noeud, .hero-svg .g-noeud:focus-visible circle.noeud, .hero-svg .g-noeud.sel circle.noeud { fill: var(--bleu-vif); stroke-width: 3; }
.hero-svg .g-noeud.trace circle { fill: var(--papier); }
.hero-svg .g-noeud.trace:hover circle, .hero-svg .g-noeud.trace:focus-visible circle { fill: var(--bleu-vif); stroke-width: 3.5; }
.carte-panneau { margin: 0.2rem 0 0; padding: 0.55rem 0.9rem; height: 13.2rem; overflow-y: auto; background: var(--papier2); border-left: 3px solid var(--bleu-vif); max-width: 46rem; position: relative; font-size: 1rem; }
.carte-panneau p { margin: 0.15rem 0; max-width: none; }
.carte-panneau .pn-titre { font-family: var(--titre); font-size: 1.2rem; }
.carte-panneau .pn-def { font-style: italic; color: var(--sepia); }
.carte-panneau .pn-actions { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.carte-panneau button.secondaire { background: transparent; color: var(--bleu); }
.hero-graphe:not(.actif) .carte-panneau { visibility: hidden; }
@media (scripting: none) { .hero-graphe .carte-panneau { display: none; } }
.carte-panneau .pn-cache { visibility: hidden; }
@media (min-width: 40.01rem) { .carte-panneau { height: 9.2rem; } }
@media (max-width: 40rem) { .hero-svg .lib { font-size: 20px; } .hero-svg .cart.centre .lib { font-size: 22px; } }
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

/* la page est un nœud déplié : sa définition, puis ses branches (chaque section s'ouvre sur place) */
.definition { max-width: 36rem; }
details.branche { position: relative; margin: 1.3rem 0 1.3rem 0.5rem; padding-left: 1.6rem; border-left: 2px solid var(--bleu-vif); border-left-color: color-mix(in srgb, var(--bleu-vif) 55%, transparent); }
details.branche > summary { list-style: none; cursor: pointer; display: block; position: relative; }
details.branche > summary::-webkit-details-marker { display: none; }
details.branche > summary h2 { display: block; margin: 0; padding: 0; font-size: 1.5rem; }
details.branche > summary h2::before { position: absolute; left: calc(-1.6rem - 1px - 0.5em); top: 0.55em; margin: 0; width: 0.62em; height: 0.62em; box-shadow: 0 0 0 0.2em var(--halo); }
details.branche:not([open]) > summary h2::before { background: var(--papier); border: 2px solid var(--bleu-vif); box-sizing: border-box; }
details.branche > summary::after { content: "+"; position: absolute; right: 0; top: 0.1em; color: var(--bleu); font-family: var(--corps); font-size: 1.4rem; line-height: 1; }
details.branche[open] > summary::after { content: "−"; }
details.branche > summary:focus-visible { outline: 3px solid var(--bleu-vif); outline-offset: 4px; }
details.branche > summary:hover h2 { color: var(--bleu); }
.branche-corps { padding-top: 0.2rem; }
.branche-corps > :first-child { margin-top: 0.4rem; }
.branche-outils { display: flex; gap: 0.6rem; margin: 1rem 0 0 0.5rem; }
.branche-outils button { background: transparent; color: var(--bleu); font-size: 0.9rem; min-height: 2.2rem; }
details.arelier h3 { font-size: 1.05rem; }
.fils .noeud-fil[aria-current="page"] { font-weight: 600; }
@media (max-width: 40rem) {
  details.branche { padding-left: 1.2rem; margin-left: 0.35rem; }
  details.branche > summary h2::before { left: calc(-1.2rem - 1px - 0.5em); }
}
@media print { details.branche > summary::after, .branche-outils { display: none; } }

/* généré par decor.regles_aspect : place réservée à la carte (aucun décalage au chargement) */
.hero-graphe.n0 svg.synapses { aspect-ratio: 900 / 186; }
.hero-graphe.n1 svg.synapses { aspect-ratio: 900 / 186; }
.hero-graphe.n2 svg.synapses { aspect-ratio: 900 / 186; }
.hero-graphe.n3 svg.synapses { aspect-ratio: 900 / 186; }
.hero-graphe.n4 svg.synapses { aspect-ratio: 900 / 186; }
.hero-graphe.n5 svg.synapses { aspect-ratio: 900 / 244; }
.hero-graphe.n6 svg.synapses { aspect-ratio: 900 / 244; }
.hero-graphe.n7 svg.synapses { aspect-ratio: 900 / 302; }
.hero-graphe.n8 svg.synapses { aspect-ratio: 900 / 302; }
.hero-graphe.n9 svg.synapses { aspect-ratio: 900 / 360; }
.hero-graphe.n10 svg.synapses { aspect-ratio: 900 / 360; }
.hero-graphe.n11 svg.synapses { aspect-ratio: 900 / 418; }
.hero-graphe.n12 svg.synapses { aspect-ratio: 900 / 418; }
@media (max-width: 40rem) {
  .hero-graphe.n0 svg.synapses { aspect-ratio: 420 / 140; }
  .hero-graphe.n1 svg.synapses { aspect-ratio: 420 / 190; }
  .hero-graphe.n2 svg.synapses { aspect-ratio: 420 / 240; }
  .hero-graphe.n3 svg.synapses { aspect-ratio: 420 / 290; }
  .hero-graphe.n4 svg.synapses { aspect-ratio: 420 / 340; }
  .hero-graphe.n5 svg.synapses { aspect-ratio: 420 / 390; }
  .hero-graphe.n6 svg.synapses { aspect-ratio: 420 / 440; }
  .hero-graphe.n7 svg.synapses { aspect-ratio: 420 / 490; }
  .hero-graphe.n8 svg.synapses { aspect-ratio: 420 / 540; }
  .hero-graphe.n9 svg.synapses { aspect-ratio: 420 / 590; }
  .hero-graphe.n10 svg.synapses { aspect-ratio: 420 / 640; }
  .hero-graphe.n11 svg.synapses { aspect-ratio: 420 / 690; }
  .hero-graphe.n12 svg.synapses { aspect-ratio: 420 / 740; }
}