/* Maquette D : l’atelier */
:root {
  --fond: #e8eaed;
  --encre: #1b2026;
  --gris: #5b636c;
  --schema: #bec4cb;
  --table: #dde0e4;
  --papier: #f7f8f9;
  --jaune: #f2a900;
  --noir: #000;
  --lever: cubic-bezier(.77, 0, .175, 1);
  --sortie: cubic-bezier(.215, .61, .355, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--fond); color: var(--encre); font-family: "Barlow", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
body { font-size: 1.125rem; line-height: 1.55; }
::selection { background: var(--jaune); color: var(--noir); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--jaune); }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
button { font: inherit; color: inherit; }
.cadre { width: min(100%, 90rem); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); }
.cond { font-family: "Barlow Semi Condensed", "Barlow", sans-serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* En-tête */
.tete { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 0; border-bottom: 2px solid var(--encre); }
.tete .nom { font-weight: 700; font-size: 1.125rem; text-decoration: none; }
.tete nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-weight: 500; }
.tete nav a { text-decoration: none; }
.tete nav a:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; }

/* Ouverture : trame décodée devant le graphe */
.ouverture { position: relative; min-height: calc(100svh - 4rem); display: flex; flex-direction: column; }
.ouverture canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: manipulation; }
.ouverture .cadre { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; pointer-events: none; padding-bottom: 3rem; }
.ouverture a, .ouverture button { pointer-events: auto; }
.legende-ligne { font-size: .9375rem; color: var(--gris); display: flex; flex-wrap: wrap; gap: .25rem 2rem; margin: clamp(2.25rem, 7vh, 4.5rem) 0 1.25rem; }
.octets { display: flex; flex-wrap: wrap; gap: 1.6rem 0; align-items: flex-start; }
.champ { display: flex; flex-direction: column; margin-right: .55rem; }
.champ.texte { max-width: 100%; }
.champ .o { display: flex; flex-wrap: wrap; }
.o span { width: 1.9em; text-align: center; padding: .15em 0; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 500; font-size: 1.1875rem; font-variant-numeric: tabular-nums lining-nums; opacity: 0; }
.o span.arrive { opacity: 1; }
.o span.double { color: var(--gris); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.champ.texte .o span.arrive { background: var(--jaune); }
.nomchamp { position: relative; font-size: .8125rem; font-weight: 500; color: var(--gris); padding-top: .45rem; white-space: nowrap; opacity: 0; transition: opacity 180ms ease-out; }
.nomchamp::before { content: ""; position: absolute; left: .25em; right: .25em; top: 0; height: 2px; background: var(--encre); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--sortie); }
.champ.lu .nomchamp { opacity: 1; }
.champ.lu .nomchamp::before { transform: scaleX(1); }
.champ.crc.ok .nomchamp { color: var(--encre); }
h1 { margin-top: clamp(2rem, 6vh, 4rem); font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: clamp(3.2rem, 11.2vw, 10.5rem); line-height: .9; letter-spacing: -.01em; white-space: nowrap; }
.js h1 .l { display: inline-block; opacity: 0; white-space: pre; }
.js h1 .l.vu { opacity: 1; }
.apres { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; margin-top: 2.25rem; align-items: start; }
.qualite { grid-column: 1 / 6; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.25; }
.explication { grid-column: 7 / 12; }
.explication p + p { margin-top: .9rem; }
.explication .note { color: var(--gris); font-size: 1rem; }
.relire { margin-top: 1.25rem; font-weight: 500; font-size: 1rem; background: none; border: 2px solid var(--encre); padding: .5rem 1rem; min-height: 44px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.relire:hover { background: var(--encre); color: var(--fond); }
.relire:active { transform: scale(.97); }
.lecture { position: absolute; z-index: 1; right: clamp(1.25rem, 4vw, 3.5rem); bottom: 1.5rem; font-size: .875rem; line-height: 1.6; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.lecture b { font-weight: 500; color: var(--encre); }
.js .fondu { opacity: 0; transition: opacity 400ms ease-out; }
.js .fondu.vu { opacity: 1; }

/* L'atelier : un plan par dossier, tracé derrière le texte */
.atelier { position: relative; margin-top: 4rem; }
.schema-fond { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; color: var(--schema); pointer-events: none; z-index: 0; overflow: hidden; }
.schema { position: absolute; top: 50%; height: auto; transition: opacity 450ms ease-out; }
/* T512 : plein cadre, centré, net — c’est le plan que l’on regarde */
.schema[data-planche="t512"] { left: 50%; translate: -50% -50%; width: min(118vw, 96rem); }
/* EIDOLON et CNRS : en filigrane clair, ancrés à droite, pour accompagner sans charger */
.schema[data-planche="eidolon"], .schema[data-planche="cnrs"] { right: 0; translate: 12% -50%; width: min(78vw, 64rem); color: #d6dade; }
.schema[data-planche="eidolon"] text, .schema[data-planche="cnrs"] text { fill: #cfd3d8; }
.schema text { fill: currentColor; stroke: none; font: 500 15px "Barlow", sans-serif; }
.schema .plein { fill: currentColor; }
.js .schema [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.js .schema .plein { fill-opacity: 0; transition: fill-opacity 400ms ease-out var(--d, 0ms); }
.js .schema text { opacity: 0; transition: opacity 500ms ease-out var(--d, 0ms); }
.js .schema.trace [pathLength] { stroke-dashoffset: 0; }
.js .schema.trace .plein { fill-opacity: 1; }
.js .schema.trace text { opacity: 1; }
.schema.part { opacity: 0; }
/* Sous la colonne de texte, le plan reste visible mais s’efface aux trois quarts */
@media (min-width: 60.01rem) {
  .schema-fond:has(.schema[data-planche="t512"].trace) { -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / .26) 0, rgb(0 0 0 / .26) 35%, #000 45%); mask-image: linear-gradient(to right, rgb(0 0 0 / .26) 0, rgb(0 0 0 / .26) 45%, #000 55%); }
  /* Filigranes EIDOLON et CNRS : estompés vers la colonne de texte, à gauche */
  .schema-fond:has(.schema[data-planche="eidolon"].trace), .schema-fond:has(.schema[data-planche="cnrs"].trace) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%); mask-image: linear-gradient(to right, transparent 0, #000 32%); }
}
.schema.sans, .schema.sans * { transition: none !important; }
.atelier > .cadre { position: relative; z-index: 1; }
/* Le texte détoure le trait : un halo couleur du fond autour de chaque lettre */
.atelier-intro, .planche .texte, .medias h4, .barre, .legendes {
  text-shadow: 0 0 1px var(--fond), 0 0 3px var(--fond), 0 0 6px var(--fond), 0 0 10px var(--fond), 0 0 16px var(--fond);
}
.atelier-intro { min-height: 86vh; padding-top: 3rem; border-top: 2px solid var(--encre); }
.atelier-intro h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .9; }
.atelier-intro p { max-width: 30rem; margin-top: 1.25rem; font-size: 1.25rem; }

.planche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; padding: 2.25rem 0 6rem; border-top: 2px solid var(--encre); }
.planche .texte { grid-column: 1 / 5; align-self: start; position: sticky; top: 1.5rem; }
.planche h3 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: .95; }
.planche .sous { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 1.25rem; margin: .5rem 0 1.25rem; }
.planche .texte p + p { margin-top: .9rem; }
.planche dl { margin-top: 1.5rem; font-size: 1rem; }
.planche dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid rgba(27, 32, 38, .25); }
.planche dt { color: var(--gris); }
.planche dd { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.planche .medias { grid-column: 5 / 13; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; min-width: 0; }
.medias h4 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 1.0625rem; margin-bottom: .6rem; }

/* Tirages : la photo sur papier, numérotée, entière */
.tirage { position: relative; display: block; padding: 9px 9px 28px; background: var(--papier); border: 0; cursor: zoom-in; rotate: var(--rot, 0deg);
  box-shadow: 0 1px 1px rgba(27, 32, 38, .1), 0 8px 20px -10px rgba(27, 32, 38, .45);
  transition: rotate 240ms var(--sortie), translate 240ms var(--sortie), box-shadow 240ms var(--sortie); }
.tirage picture { display: contents; }
.tirage img { display: block; }
.tirage .num { position: absolute; left: 10px; bottom: 7px; font: 500 .8125rem/1 "Barlow Semi Condensed", sans-serif; color: var(--gris); font-variant-numeric: tabular-nums; }
.tirage:focus-visible { outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .tirage:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 1px 1px rgba(27, 32, 38, .1), 0 18px 32px -14px rgba(27, 32, 38, .5); z-index: 2; }
}

/* L'établi du T512 : trois tirages posés en éventail */
.etabli { container-type: size; height: clamp(26rem, 72vh, 46rem); display: flex; justify-content: center; align-items: flex-start; padding-top: .5rem; }
.etabli .tirage { flex: none; margin-inline: -.9rem; }
.etabli .tirage img { width: min(calc((84cqh - 46px) * var(--r, .5625)), calc(34cqw - 18px)); height: auto; }
.etabli .tirage:nth-child(1) { --rot: -2.6deg; margin-top: 2.4rem; }
.etabli .tirage:nth-child(2) { --rot: 1.3deg; }
.etabli .tirage:nth-child(3) { --rot: -.8deg; margin-top: 3.4rem; }
.js .etabli .tirage { opacity: 0; translate: 0 1.5rem; transition: opacity 500ms var(--sortie) var(--pose, 0ms), translate 650ms var(--sortie) var(--pose, 0ms), rotate 650ms var(--sortie) var(--pose, 0ms), box-shadow 240ms var(--sortie); }
.js .etabli:not(.pose) .tirage { rotate: calc(var(--rot) * 2.5); }
.js .etabli.pose .tirage { opacity: 1; translate: none; }
.js .etabli .tirage:nth-child(2) { --pose: 110ms; }
.js .etabli .tirage:nth-child(3) { --pose: 220ms; }
@media (hover: hover) and (pointer: fine) { .js .etabli.pose .tirage:hover { translate: 0 -4px; transition-delay: 0ms; } }
.legendes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1.5rem; font-size: 1rem; color: var(--gris); }
.legendes .n, .leg .n { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; margin-right: .5em; }

/* Le Pi, en retrait dans la colonne de texte */
.tirage-seul { margin: 2.5rem 0 0 10%; }
.tirage-seul .tirage { --rot: 1.8deg; }
.tirage-seul .tirage img { width: 100%; height: auto; }
.tirage-seul figcaption { margin-top: .9rem; font-size: .9375rem; color: var(--gris); }

/* Diaporama : défilement natif aimanté ; deux photos en hauteur partagent une vue */
.diapo { position: relative; }
.scene { position: relative; }
.piste { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; height: clamp(22rem, 66vh, 46rem); background: var(--table); }
.piste::-webkit-scrollbar { display: none; }
.vue { flex: 0 0 100%; scroll-snap-align: start; padding: clamp(.75rem, 2vw, 1.5rem); container-type: size; display: grid; place-items: center; }
.vue .tirage img { width: min(calc(100cqw - 30px), calc((100cqh - 52px) * var(--r, 1))); height: auto; }
.duo .vue.etroite { flex-basis: 50%; }
.duo .vue.paire { justify-items: end; padding-right: .75rem; }
.duo .vue.suite { justify-items: start; padding-left: .75rem; scroll-snap-align: none; }
.vue:nth-child(4n + 1) .tirage { --rot: -.9deg; }
.vue:nth-child(4n + 2) .tirage { --rot: .7deg; }
.vue:nth-child(4n + 3) .tirage { --rot: -.4deg; }
.vue:nth-child(4n + 4) .tirage { --rot: 1.1deg; }
.fleche { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(232, 234, 237, .9); border: 2px solid var(--encre); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease; }
.fleche.prec { left: .75rem; }
.fleche.suiv { right: .75rem; }
.fleche svg { width: 18px; height: 18px; }
.fleche:active { transform: scale(.96); }
.fleche[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .fleche:hover { background: var(--encre); color: var(--fond); } }
.barre { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: start; margin-top: .75rem; }
.barre .leg { font-size: 1rem; color: var(--gris); min-height: 4.65em; }
.leg p { padding-left: 1.25em; text-indent: -1.25em; }
.leg p + p { margin-top: .3rem; }
.legendes li { padding-left: 1.25em; text-indent: -1.25em; }
.leg .n, .legendes .n { display: inline-block; width: 1.25em; margin-right: 0; text-indent: 0; }
.outils { display: flex; align-items: center; gap: 1rem; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.segments { display: flex; }
.segments button { width: 26px; height: 32px; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.segments button::before { content: ""; width: 18px; height: 3px; background: var(--schema); transition: background-color 150ms ease; }
.segments button[aria-current="true"]::before { background: var(--encre); }

/* Loupe : une photo à la fois, flèches et clavier pour parcourir sa série */
.loupe { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(232, 234, 237, .97); color: var(--encre); }
.loupe[open] { display: grid; }
.loupe::backdrop { background: rgba(0, 0, 0, .3); }
.loupe figure { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.loupe img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 4rem 5rem 1rem; }
.loupe figcaption { display: flex; justify-content: space-between; gap: 1.5rem; padding: .25rem 5rem 1.5rem; font-size: 1rem; color: var(--gris); }
.loupe-cpt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.loupe .fleche.prec { left: 1rem; }
.loupe .fleche.suiv { right: 1rem; }
.loupe .fleche[hidden] { display: none; }
.loupe .fermer { position: absolute; top: .75rem; right: 1rem; background: none; border: 2px solid var(--encre); padding: .45rem 1rem; min-height: 44px; cursor: pointer; font-weight: 500; }

/* Banc EIDOLON : feuille de tracé posée sur l'établi, graphe au-dessus, boucle de runBP en dessous */
.banc-feuille { background: var(--papier); box-shadow: 0 1px 1px rgba(27, 32, 38, .1), 0 10px 26px -14px rgba(27, 32, 38, .45); }
.graphe { display: block; width: 100%; height: auto; touch-action: manipulation; }
.graphe .a { stroke: var(--encre); stroke-width: 1.1; fill: none; stroke-opacity: .55; }
.graphe .a.suggests, .graphe .a.influences { stroke-dasharray: 4 5; stroke-opacity: .4; }
.graphe .halo { fill: var(--papier); }
.graphe .coeur { fill: color-mix(in srgb, var(--jaune) calc(var(--hausse, 0) * 85%), var(--papier)); stroke: var(--encre); stroke-width: 1.4; transition: fill 300ms ease-out; }
.graphe .repere { stroke: var(--gris); stroke-width: 1.5; }
.graphe .jauge { fill: none; stroke: var(--encre); stroke-width: 3; stroke-dasharray: var(--b, 0) 1; transform: rotate(-90deg); transition: stroke-dasharray 300ms var(--sortie); }
.graphe text { font: 500 14.5px "Barlow", sans-serif; fill: var(--gris); paint-order: stroke; stroke: var(--papier); stroke-width: 4px; stroke-linejoin: round; transition: fill 200ms ease-out; }
.graphe .n { cursor: pointer; outline: none; }
.graphe .n.parle text { fill: var(--encre); }
.graphe .n.oui .coeur { fill: var(--jaune); }
.graphe .n.non .coeur { fill: var(--encre); }
.graphe .n.oui text, .graphe .n.non text { font-weight: 700; fill: var(--encre); }
.graphe .n:focus-visible .halo { stroke: var(--jaune); stroke-width: 4; }
.graphe .n:focus-visible text { fill: var(--encre); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .graphe .n:hover .coeur { stroke-width: 2.4; } .graphe .n:hover text { fill: var(--encre); } }
.graphe .m { fill: var(--jaune); stroke: var(--encre); stroke-width: .8; pointer-events: none; }
/* Dévoilement : nœuds et arêtes apparaissent à mesure que la propagation les atteint */
.js .banc.actif .n { opacity: 0; transition: opacity 360ms var(--sortie); }
.js .banc.actif .n.vu { opacity: 1; }
.js .banc.actif .a { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 520ms var(--sortie); }
.js .banc.actif .a.vu { stroke-dashoffset: 0; }
.js .banc.actif .a.suggests.vu, .js .banc.actif .a.influences.vu { stroke-dasharray: .012 .016; }
.banc-relancer { background: none; border: 0; padding: .5rem 0; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.banc-code { border-top: 1px solid rgba(27, 32, 38, .2); }
.code-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .55rem 1.25rem; font-size: .875rem; color: var(--gris); }
.code-tete a { color: var(--encre); font-weight: 500; }
.code-fenetre { position: relative; flex: none; height: 9.2rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); }
.code { margin: 0; padding: 1rem 0 6rem; font: 400 .78rem/1.62 ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: var(--encre); transition: transform 260ms var(--sortie); }
.code .ln { display: block; padding: 0 1.25rem 0 0; white-space: pre; transition: background-color 160ms ease-out; }
.code .no { display: inline-block; width: 3.6em; padding-right: 1.1em; text-align: right; color: var(--schema); user-select: none; }
.code .ln.actif { background: rgb(242 169 0 / .2); }
.code .ln.actif .no { color: var(--encre); }
.code .c-cm { color: var(--gris); }
.code .c-mc { font-weight: 700; }
.code .c-no, .code .c-ch { color: #7a4f00; }

/* Sommaire des dossiers, en tête de l'atelier */
/* Posé sur le plan comme une nomenclature : fond plein, le trait s'arrête à ses bords */
.sommaire { list-style: none; margin-top: 3rem; max-width: 46rem; border-top: 2px solid var(--encre); background: var(--fond); box-shadow: 0 0 0 1.25rem var(--fond); position: relative; }
.sommaire a { display: grid; grid-template-columns: 2.5rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 1.5rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid rgba(27, 32, 38, .25); text-decoration: none; }
.sommaire .no { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--gris); }
.sommaire .t { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.625rem; line-height: 1.1; }
.sommaire .s { color: var(--gris); font-size: 1rem; }
.sommaire a:hover .t { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: .15em; }
.sommaire a:focus-visible { outline-offset: 4px; }

/* EIDOLON : un pupitre qui tient dans un écran. Texte et commandes à gauche, feuille de tracé à droite */
.planche-eidolon .texte { grid-column: 1 / 4; }
.planche-eidolon .medias { grid-column: 4 / 13; gap: 4rem; }
.banc-feuille { position: relative; display: flex; flex-direction: column; height: clamp(34rem, calc(100svh - 5.5rem), 54rem); }
.graphe-cadre { flex: 1 1 auto; min-height: 0; padding: .5rem .75rem 0; }
.graphe { height: 100%; }
.banc-commande { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 2px solid var(--encre); font-size: .9375rem; }
.banc-commande .etat { display: flex; flex-direction: column; gap: .1rem; font-variant-numeric: tabular-nums; min-height: 3.1em; }
.banc-commande .iter { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.banc-commande .delta { color: var(--gris); }
.banc-commande .consigne { margin-top: .9rem; color: var(--gris); }
.lecture-graphe { list-style: none; margin-top: 1rem; display: grid; gap: .35rem; }
.lecture-graphe li { display: flex; align-items: center; gap: .6rem; }
.lecture-graphe svg { flex: none; width: 22px; height: 22px; overflow: visible; }
.lecture-graphe circle, .lecture-graphe path { fill: none; stroke: var(--encre); stroke-width: 1.4; }
.lecture-graphe .g-oui { fill: var(--jaune); }
.lecture-graphe .g-non { fill: var(--encre); }
.lecture-graphe .g-hausse { fill: color-mix(in srgb, var(--jaune) 45%, var(--papier)); }
.lecture-graphe .g-coeur { fill: var(--papier); }
.lecture-graphe .g-jauge { stroke-width: 3; stroke-dasharray: .38 1; transform: rotate(-90deg); }
.lecture-graphe .g-repere { stroke: var(--gris); stroke-width: 1.5; }
.lecture-graphe .g-lien { stroke-opacity: .6; }
.lecture-graphe .g-faible { stroke-opacity: .5; stroke-dasharray: 4 5; }
.banc-commande .banc-relancer { margin-top: .6rem; }

/* Témoin d'itération, collé en haut du graphe sur petit écran */
.temoin { display: none; }

/* Captures d'EIDOLON : quatre tirages posés deux par deux */
.bande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; padding: 0 .75rem; }
.bande .tirage img { width: 100%; height: auto; }
.bande .tirage:nth-child(4n + 1) { --rot: -1.1deg; }
.bande .tirage:nth-child(4n + 2) { --rot: .8deg; translate: 0 1.1rem; }
.bande .tirage:nth-child(4n + 3) { --rot: .5deg; }
.bande .tirage:nth-child(4n + 4) { --rot: -.7deg; translate: 0 1.1rem; }
@media (hover: hover) and (pointer: fine) { .bande .tirage:hover { translate: 0 -4px; } }

/* T512 : le Pi en retrait, sa légende à côté, pour que la planche tienne dans un écran */
.tirage-seul { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 1.25rem; align-items: end; margin: 2.25rem 0 0 4%; width: auto; }
.tirage-seul figcaption { margin: 0 0 .4rem; }

/* Repérage : cartouche de la planche en cours, en bas à gauche, comme un cartouche de plan */
.reperage { position: fixed; z-index: 4; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); display: grid; background: var(--papier); border: 1.5px solid var(--encre); text-decoration: none; color: var(--encre); box-shadow: 0 6px 18px -12px rgba(27, 32, 38, .5); }
.reperage[hidden] { display: none; }
.reperage-no { padding: .3rem .7rem .25rem; font: 600 .75rem/1 "Barlow Semi Condensed", sans-serif; letter-spacing: .02em; color: var(--gris); border-bottom: 1px solid rgba(27, 32, 38, .25); font-variant-numeric: tabular-nums; }
.reperage-nom { padding: .3rem .7rem .4rem; font: 700 1.0625rem/1 "Barlow Semi Condensed", sans-serif; }
.js .reperage { opacity: 0; translate: 0 .4rem; transition: opacity 260ms var(--sortie), translate 260ms var(--sortie); }
.js .reperage:not([hidden]) { opacity: 1; translate: 0; }
@media (hover: hover) and (pointer: fine) { .reperage:hover { border-color: var(--jaune); } .reperage:hover .reperage-nom { text-decoration: underline; text-decoration-color: var(--jaune); text-underline-offset: .15em; } }
.reperage:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }

/* Caviardage */
.js .cav { padding: 0 .06em; margin: 0 -.06em; background: linear-gradient(var(--noir), var(--noir)) no-repeat right bottom / 100% calc(100% - .14em); transition: background-size var(--t, 900ms) var(--lever) var(--d, 0ms); }
.js .cav.leve { background-size: 0% calc(100% - .14em); }
/* Tant que la barre couvre le texte : encre noire comme la barre et pas de halo, rien ne transparaît */
.js .cav:not(.fini) { color: var(--noir); text-shadow: none; }
.secret { display: inline-block; vertical-align: -.14em; width: 8.5em; height: 1.05em; background: var(--noir); }

.pied { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; padding: 2.5rem 0 5rem; border-top: 2px solid var(--encre); }
.pied section { grid-column: span 4; }
.pied h2 { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 1.375rem; margin-bottom: .4rem; }
.pied p { color: var(--gris); font-size: 1rem; }
.pied p + p { margin-top: .6rem; }
.pied b { color: var(--encre); font-weight: 600; }
.pied .fpr { display: block; margin-top: .2rem; font-size: .8125rem; letter-spacing: .02em; color: var(--gris); }

/* Colophon : le reste du travail, en pointeur discret plutôt qu'en liste */
.colophon { padding: 2.5rem 0; border-top: 2px solid var(--encre); }
.colophon p { color: var(--gris); font-size: 1.0625rem; }
.colophon a { color: var(--encre); font-weight: 500; text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; text-underline-offset: .15em; }
.colophon .ouvert { margin-top: .6rem; color: var(--encre); }

@media (max-width: 60rem) {
  .apres, .planche, .pied { display: block; }
  .explication { margin-top: 1.25rem; }
  .planche .texte { position: static; margin-bottom: 2rem; }
  .pied section + section { margin-top: 1.75rem; }
  .o span { font-size: 1rem; }
  .champ { margin-right: .6rem; }
  .tete { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .lecture { position: relative; right: auto; bottom: auto; text-align: left; padding: 0 1.25rem 2rem; }
  .piste { height: clamp(20rem, 68vh, 36rem); }
  .barre { grid-template-columns: 1fr; }
  .atelier-intro { min-height: 70vh; }
  .schema[data-planche="t512"] { width: 190vw; stroke-width: 2.4; }
  .schema[data-planche="eidolon"], .schema[data-planche="cnrs"] { translate: 20% -50%; width: 150vw; color: #d9dde1; stroke-width: 1.5; }
  .graphe-cadre { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: .25rem 0 0; }
  .graphe { width: 780px; max-width: none; height: auto; }
  .banc-feuille { height: auto; }
  .temoin { display: block; position: absolute; z-index: 1; top: .5rem; left: .9rem; margin: 0; padding: .2rem .5rem; background: rgb(247 248 249 / .92); font: 600 .9375rem/1.3 "Barlow Semi Condensed", sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
  .temoin:empty { display: none; }
  .code-fenetre { height: 11rem; }
  /* EIDOLON sur mobile : titre, graphe, état et commandes, fiche, captures */
  .planche-eidolon { display: flex; flex-direction: column; }
  .planche-eidolon .texte, .planche-eidolon .medias { display: contents; }
  .planche-eidolon h3 { order: 1; }
  .planche-eidolon .sous { order: 2; }
  .planche-eidolon .banc-feuille { order: 3; margin-inline: -.5rem; }
  .planche-eidolon .banc-commande { order: 4; margin-top: 1.25rem; }
  .planche-eidolon dl { order: 5; margin-top: 2rem; }
  .planche-eidolon .bande { order: 6; margin-top: 2.5rem; }
  .planche-eidolon .legendes { order: 7; }
  .lecture-graphe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; font-size: .875rem; }
  .sommaire a { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .sommaire .s { grid-column: 2; }
  .tirage-seul { margin-left: 0; }
  .reperage { display: none; }
  .code { font-size: .6875rem; }
  .code-fenetre { height: 13rem; }
  .banc-releve, .code-tete { padding-inline: .9rem; }
  .schema text { display: none; }
  .etabli { container-type: inline-size; height: auto; flex-direction: column; align-items: flex-start; padding: 0 .5rem; }
  .etabli .tirage { margin-inline: 0; }
  .etabli .tirage img { width: calc(62cqw - 18px); }
  .etabli .tirage:nth-child(n) { margin-top: 0; }
  .etabli .tirage:nth-child(2) { align-self: flex-end; }
  .etabli .tirage + .tirage { margin-top: -22cqw; }
  .legendes { grid-template-columns: 1fr; margin-top: 1.25rem; }
  .tirage-seul { margin-bottom: 1rem; }
  .loupe img { padding: 4rem 1rem 1rem; }
  .loupe figcaption { padding: .25rem 1rem 5rem; flex-direction: column; gap: .25rem; }
  .loupe .fleche { top: auto; bottom: 1rem; translate: none; }
  .loupe .fleche.prec { left: auto; right: 4.5rem; }
}
@media (max-width: 30rem) {
  h1 { font-size: calc(14.2vw - .35rem); }
  .bande { grid-template-columns: 1fr; padding: 0; }
  .bande .tirage:nth-child(n) { translate: none; }
  .lecture-graphe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .nomchamp, .nomchamp::before, .js .fondu, .js .cav, .js .reperage, .js .schema [pathLength], .js .schema .plein, .js .schema text, .schema, .fleche, .segments button::before, .tirage, .js .etabli .tirage, .graphe .jauge, .graphe .coeur, .js .banc.actif .n, .js .banc.actif .a, .code, .code .ln { transition: none; }
  .piste { scroll-behavior: auto; }
}

/* ---------- Impression : chaque dossier devient une planche propre ---------- */
@media print {
  :root { --fond: #fff; --papier: #fff; }
  html, body { background: #fff; color: #000; }
  .tete nav, .legende-ligne, #octets, .relire, .reperage, .loupe, .fleche, .segments,
  .schema-fond, .banc-commande, .banc-code, .graphe-cadre, .agrandir, .temoin { display: none !important; }
  .cadre { max-width: none; padding: 0; }
  .tete { border-bottom: 2px solid #000; }
  .cav { background: none !important; color: inherit !important; text-shadow: none !important; }
  .ouverture { min-height: 0; }
  .ouverture .cadre { padding: 0; }
  h1 { font-size: 3rem !important; white-space: normal; margin: .5rem 0 1rem; }
  .apres { display: block; }
  .explication .note { display: none; }
  .atelier-intro, .sommaire { display: none; }
  .planche { display: block; break-before: page; padding: 0; border: 0; }
  .planche .texte { position: static; }
  .planche h3 { font-size: 2.2rem; border-bottom: 2px solid #000; padding-bottom: .3rem; }
  .medias { margin-top: 1rem; }
  .piste { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 8mm; height: auto !important; overflow: visible !important; background: none; }
  .vue { break-inside: avoid; }
  .vue .tirage img, .bande .tirage img, .etabli .tirage img, .tirage-seul .tirage img { width: 100% !important; height: auto !important; }
  .etabli { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6mm; height: auto !important; container-type: normal; }
  .bande { break-inside: avoid; }
  .tirage { break-inside: avoid; rotate: none !important; box-shadow: none !important; border: 1px solid #000; opacity: 1 !important; translate: none !important; }
  .legendes { break-inside: avoid; }
  .banc-feuille { display: none !important; }
  .pied { display: block; break-before: page; }
  .pied section { break-inside: avoid; margin-bottom: 1rem; }
  a { color: #000; text-decoration: underline; }
  @page { margin: 16mm; }
}

/* ---------- Page 404 : une trame rejetée ---------- */
.erreur { padding-top: clamp(2rem, 7vh, 4.5rem); padding-bottom: 5rem; }
.erreur .octets { margin-top: 1.25rem; }
.erreur .o span { opacity: 1; }
.erreur .nomchamp { opacity: 1; }
.erreur .nomchamp::before { transform: scaleX(1); }
.erreur .champ.faux .o span { background: var(--jaune); color: var(--noir); }
.erreur .champ.faux .nomchamp { color: var(--encre); white-space: normal; max-width: 9rem; }
.erreur .champ.faux .nomchamp::before { transform: scaleX(1); background: var(--encre); }
.code-erreur { margin-top: clamp(2rem, 6vh, 4rem); font: 700 clamp(4rem, 14vw, 11rem)/.9 "Barlow Semi Condensed", sans-serif; letter-spacing: -.01em; color: var(--schema); }
.titre-erreur { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: clamp(2.5rem, 7vw, 5rem); line-height: .95; margin-top: -.3em; }
.texte-erreur { margin-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; }
.texte-erreur p + p { margin-top: 1rem; }
.texte-erreur a { font-weight: 500; }