/*! ©111101.net — all rights reserved / tous droits réservés */
/* Section cascades (cascade.js; owner-approved 21 October 2026). Everything is prefixed cx- and resets the site's
   global element rules (original.css styles every button and link). Section colours come from the 2006 palette:
   artworks mauve #996666 (the mapping block), writings blue #006699 (eNews), projects olive #666633, references
   orange #CC6600 (search), facts #880000 (the chronology's dates), about grey #666666. */
.cx, .cx *, .cx *::before, .cx *::after { box-sizing: border-box }
.cx button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.cx a { color: inherit; text-decoration: none }
.cx a:hover { text-decoration: underline }
.cx p { margin: 0 }
.cx :focus-visible { outline: 1px dotted currentColor; outline-offset: -2px }

/* ---- the unfolded rail: 200px over the original one ---- */
.cx-rail { position: fixed; top: 0; bottom: 0; z-index: 2000; width: 200px; overflow: hidden; background: #000; color: #fff; font: 11px/1 Arial, Helvetica, sans-serif;
  clip-path: inset(0 140px 0 0); visibility: hidden; transition: clip-path .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s }
.cx-rail.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .24s cubic-bezier(.2, .7, .2, 1) }
/* Each item's word on its own row, where the item is; the open section's row takes its colour. */
.cx .cx-w { position: absolute; left: 0; width: 100%; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 4px; color: #fff; font: 11px/1 Arial, Helvetica, sans-serif; white-space: nowrap }
.cx .cx-w.is-current { background: #fff; color: #333 }
.cx .cx-w.is-open { background: var(--c); color: #fff }
.cx-w .cx-a { margin-left: auto }
/* The lower part of the bar: the open section's contents, titles only. */
.cx-lower { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; border-top: 1px solid var(--c) }
.cx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; scrollbar-color: #444 #000 }
.cx .cx-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 22px; padding: 3px 10px 3px 11px; color: #ddd; font: 12px/16px Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.cx .cx-row:hover, .cx .cx-row:focus-visible { color: #fff }
.cx .cx-row:hover .cx-t, .cx .cx-row:focus-visible .cx-t { text-decoration: underline }
.cx .cx-row.on { background: var(--c); color: #fff }
.cx-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cx-n { flex: none; font: 10px/1 Verdana, Arial, Helvetica, sans-serif; color: #888 }
.cx-row.on .cx-n { color: rgba(255, 255, 255, .85) }
.cx-a { flex: none; font: 13px/1 Verdana, Arial, Helvetica, sans-serif; opacity: .6 }
.cx-row.on .cx-a { opacity: 1 }
.cx-list .cx-gap { display: block; height: 9px }
.cx-wait { padding: 6px 11px; color: #888; font: 11px Verdana, Arial, Helvetica, sans-serif }
.cx-foot { flex: none; padding: 6px 10px 8px 11px; border-top: 1px solid #1c1c1c }
.cx .cx-foot button { color: #888; font: 10px Verdana, Arial, Helvetica, sans-serif }
.cx .cx-foot button:hover, .cx .cx-foot button:focus-visible { color: #fff }

/* ---- panels: the section's colour at depth 1, lighter at each further level, white for the detail ---- */
.cx-pn { position: fixed; top: 0; bottom: 0; z-index: 1999; overflow: hidden; color: #222; font: 11px/14px Verdana, Arial, Helvetica, sans-serif }
.cx-pn[data-depth="1"] { background: var(--c); color: #fff }
.cx-pn[data-depth="2"] { background: color-mix(in srgb, var(--c) 55%, #fff) }
.cx-pn[data-depth="3"] { background: color-mix(in srgb, var(--c) 32%, #fff) }
.cx-pn[data-depth="4"] { background: color-mix(in srgb, var(--c) 18%, #fff) }
.cx-pn.cx-detail { background: #fff; color: #333; border-right: 1px solid var(--c) }
.cx-in { height: 100%; overflow-y: auto; padding: var(--top, 85px) 14px 28px }
.cx-h { margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed color-mix(in srgb, currentColor 45%, transparent) }
.cx-ht { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font: 15px/1.25 Verdana, Arial, Helvetica, sans-serif }
.cx-detail .cx-ht { color: var(--c) }
.cx-detail .cx-h { border-bottom-color: var(--c) }
.cx-hs { margin-top: 4px; font: 10px/15px Verdana, Arial, Helvetica, sans-serif; opacity: .85 }
.cx button.cx-x { flex: none; padding: 0 2px; font: 17px/1 Verdana, sans-serif; opacity: .7 }
.cx button.cx-x:hover, .cx button.cx-x:focus-visible { opacity: 1 }
.cx button.cx-step { padding: 0 3px; font: 13px/1 Verdana, sans-serif; opacity: .8 }
.cx button.cx-step:hover, .cx button.cx-step:focus-visible { opacity: 1 }
.cx .cx-r { display: flex; align-items: center; gap: 8px; width: calc(100% + 28px); min-height: 20px; margin: 0 -14px; padding: 3px 14px; color: inherit; font: 11px/14px Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.cx .cx-r:hover .cx-rt, .cx .cx-r:focus-visible .cx-rt { text-decoration: underline }
.cx-rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cx-rn { flex: none; font-size: 10px; opacity: .7 }
.cx-r .cx-a { font-size: 11px }
.cx .cx-r.on { background: var(--next); color: #222 }
.cx-b .cx-gap { display: block; height: 8px }
.cx-thumb { display: block; max-width: 100%; height: auto; margin: 2px 0 10px; border: 1px solid #ddd }
.cx-meta { margin: 0 0 8px; font: 10px/15px Verdana, Arial, Helvetica, sans-serif; color: #777 }
.cx-text { margin: 0 0 10px; font: 11px/17px Verdana, Arial, Helvetica, sans-serif }
.cx-links { margin-top: 12px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, currentColor 40%, transparent); font: 10px/16px Verdana, Arial, Helvetica, sans-serif }
.cx-detail .cx-links { border-top-color: var(--c) }
.cx-pn.is-spine { border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent) }
.cx button.cx-spine { display: flex; justify-content: center; width: 100%; height: 100%; padding: var(--top, 85px) 0 0 }
.cx-spine span { writing-mode: vertical-rl; font: 12px/1 Verdana, Arial, Helvetica, sans-serif; white-space: nowrap }
.cx-spine:hover span, .cx-spine:focus-visible span { text-decoration: underline }
.cx-pn.anim-new { animation: cx-in .26s cubic-bezier(.2, .7, .2, 1) both }
@keyframes cx-in { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@media (prefers-reduced-motion: reduce) { .cx-rail, .cx-pn { transition: none !important; animation: none !important } }
/* Phones fold the navigation behind the ant (responsive.js); the cascades stay out of the way there. */
@media (max-width: 599px) { .cx-rail, .cx-pn { display: none !important } }
@media print { .cx-rail, .cx-pn { display: none !important } }