/* Un récit continu : vues d'artiste, schémas et expériences calculées. */
html.univers-js { scroll-behavior: auto; }
.univers { --largeur: 92rem; --or: #dfc58f; --bleu: #9fbbd8; --nav-height: 66px; --marge: clamp(24px, 5vw, 80px); padding: 0; font: 18px/1.7 var(--sans); }
.univers > .pluie { opacity: .08; }
.univers main { max-width: none; margin: 0; }
.barre-univers { margin-inline: var(--marge); max-width: none; min-height: 178px; border-bottom: 1px solid var(--line); }
.barre-univers h1 { margin: 22px 0 0; font: 400 clamp(6rem, 10.8vw, 10.4rem)/.94 var(--serif); letter-spacing: -.065em; }
.barre-univers nav { gap: 32px; }
.univers h2 { font: 400 clamp(3rem, 5.25vw, 5.5rem)/1.04 var(--serif); letter-spacing: -.04em; margin: 0 0 28px; text-wrap: balance; }
.univers h3 { font: 400 30px/1.2 var(--serif); letter-spacing: -.02em; margin: 0 0 14px; }
.univers p { margin: 0 0 20px; text-wrap: pretty; }
.univers [id] { scroll-margin-top: calc(var(--nav-height) + 32px); }
.univers :is(button,input,summary,select):focus-visible { outline: 2px solid var(--or); outline-offset: 5px; }
.univers button, .univers input, .univers select { font: 14px/1.5 var(--sans); }
.univ-sommaire { display: flex; gap: 16px; align-items: center; min-height: var(--nav-height); position: sticky; top: 0; z-index: 20; padding-inline: var(--marge); background: rgba(13,16,15,.92); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(196,208,189,.12); font: 13px/1.4 var(--sans); }
.univ-chapitres { display: flex; gap: 36px; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.univ-chapitres::-webkit-scrollbar { display: none; }
.univ-sommaire a { padding: 24px 0; color: var(--muted); text-decoration: none; white-space: nowrap; position: relative; }
.univ-sommaire a[aria-current] { color: var(--fg); }
.univ-sommaire a[aria-current]::after { content: ''; position: absolute; bottom: 14px; left: 0; right: 0; height: 1px; background: var(--or); }
#univ-motion { display: flex; justify-content: center; align-items: center; margin-left: auto; border: 0; width: 44px; min-height: 44px; padding: 12px; background: transparent; color: var(--muted); cursor: pointer; }
#univ-motion[hidden] { display: none; }
.univ-motion-icon { width: 10px; height: 12px; border-inline: 2px solid currentColor; }
#univ-motion[aria-pressed="true"] .univ-motion-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.univ-histoire { position: relative; overflow-x: visible; overflow-y: clip; }  /* la scène fixe s'arrête avec son récit */
.univ-scenes { display: none; }
.univ-etapes { position: relative; z-index: 2; pointer-events: none; }
.univ-texte { width: min(100%, 460px); pointer-events: auto; }
.univ-texte h2 { max-width: 600px; }
.univ-etape h2 { width: min(560px,41vw); font-size: clamp(3rem,4.7vw,4.8rem); }
.univ-etape, .univ-ouverture { padding: 65px var(--marge); }
.univ-ouverture .univ-texte { width: min(100%, 730px); }
.univ-ouverture h2 { font-size: clamp(3.2rem, 5vw, 5rem); max-width: 730px; }
.univ-ouverture h2 span { white-space: nowrap; }
.univ-ouverture p { max-width: 520px; }
.univers-js .univ-scenes { display: block; position: sticky; top: var(--nav-height); height: calc(100svh - var(--nav-height)); margin-bottom: calc(-100svh + var(--nav-height)); overflow: clip; }
.univ-scene-fixe { position: relative; height: 100%; }
.cosmos-canvas, .cosmos-overlay { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmos-overlay { pointer-events: none; }
.cosmos-legende { position: absolute; bottom: 32px; right: var(--marge); font: 11px/1.5 var(--sans); color: var(--muted); margin: 0; }
.univ-schema { margin: 36px 0 0; max-width: 720px; pointer-events: auto; }
.univ-schema svg { display: block; width: 100%; height: 100%; overflow: visible; }
.univ-schema figcaption { font: 11px/1.5 var(--sans); text-align: center; color: var(--muted); margin-top: 16px; }
.univ-schema[hidden] { display: none; }
.univ-art-layer { position: absolute; inset: 0 -1% 0 36%; display: grid; align-items: center; pointer-events: none; }
.univ-illustration { margin: 24px 0; width: 100%; max-width: 1100px; }
.univ-image-wrap { position: relative; transform-origin: 52% 48%; }
.univ-illustration img { display: block; width: 100%; height: auto; mask-image: radial-gradient(ellipse 68% 67% at 50% 50%,#000 46%,transparent 76%); }
.univ-illustration figcaption { margin: 14px 0 0; color: var(--muted); text-align: center; font: 11px/1.5 var(--sans); }
.univ-art-labels { display: flex; justify-content: space-around; gap: 20px; padding-inline: 8%; margin-top: -12px; position: relative; font: 13px/1.5 var(--sans); color: var(--fg); text-align: center; }
.univ-art-labels > span { flex: 1; }
.univ-illustration[hidden] { display: none; }
.univ-art-layer .univ-illustration { margin: 0; opacity: 0; }
.univ-art-layer .univ-illustration[data-loaded="true"] { opacity: 1; animation: univ-art-reveal .65s ease-out; }
.univ-scenes[data-art="true"] :is(.cosmos-canvas,.cosmos-legende) { visibility: hidden; }
.univ-scenes[data-scene="apercu"] .univ-art-layer { transform: translateY(-9%); }
.univ-scenes[data-scene="apercu"] .univ-illustration figcaption { margin-top: 0; }
.univ-photons { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.univ-photons path { fill: none; stroke: #fff3cc; stroke-width: 1.2; stroke-dasharray: 5 12; stroke-linecap: round; filter: drop-shadow(0 0 4px #e6bc75); animation: univ-photon 5s linear infinite; opacity: .9; }
.univers[data-frozen="true"] :is(.univ-illustration,.univ-photons path) { animation: none; }
@keyframes univ-art-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes univ-photon { to { stroke-dashoffset: -170; } }
.schema-label { fill: var(--fg); font: 25px var(--sans); }
.schema-note { fill: var(--muted); font: 23px var(--sans); }
.schema-symbole { fill: var(--fg); font: 25px var(--sans); dominant-baseline: central; }
.schema-trait { fill: none; stroke: var(--accent); stroke-width: 1; stroke-opacity: .6; }
.schema-grille { fill: none; stroke: var(--accent); stroke-width: .7; stroke-opacity: .24; }
.schema-up { fill: #dfc58f20; stroke: var(--or); stroke-width: 1.3; }
.schema-down { fill: #9fbbd820; stroke: var(--bleu); stroke-width: 1.3; }
.schema-enveloppe { fill: none; stroke: var(--accent); stroke-width: .7; stroke-dasharray: 3 5; stroke-opacity: .5; }
.schema-point, .schema-soleil { fill: var(--or); }
.schema-planete { fill: var(--bleu); }
.schema-poussiere { fill: var(--or); opacity: .5; }
.schema-gluon { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.schema-lumiere { fill: none; stroke: var(--or); stroke-width: 1.5; }
.schema-or { fill: var(--or); }
.univers-js .univ-ouverture { display: flex; align-items: center; min-height: calc(100svh - 244px); padding-top: 120px; padding-bottom: 100px; }
.univers-js .univ-etape { display: flex; min-height: max(680px, calc(100svh - var(--nav-height))); padding-top: clamp(120px, 16svh, 190px); padding-bottom: 120px; align-items: flex-start; }
.univ-date { font: 14px/1.6 var(--sans); color: var(--or); margin-bottom: 24px !important; }
.univ-resume { max-width: 40ch; }
.univ-source { font: 12px/1.6 var(--sans); margin-top: 26px !important; color: var(--muted); }
.univ-source a { color: var(--muted); }
.univers details { margin-top: 22px; font: 14px/1.8 var(--sans); color: var(--muted); }
.univers details summary { display: flex; align-items: center; gap: 14px; width: fit-content; min-height: 44px; list-style: none; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--accent); }
.univers details summary::-webkit-details-marker { display: none; }
.univers details summary::after { content: '+'; font-size: 20px; font-weight: 400; line-height: 1; }
.univers details[open] summary::after { content: '−'; }
.univers details p { margin: 18px 0 0; }
.univers details[open] { color: var(--fg); }
.univ-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.univ-laboratoire, .univ-sources { margin-inline: var(--marge); }
.univ-laboratoire { position: relative; padding-top: 16px; }
.univ-experience { display: grid; grid-template-columns: minmax(0,.35fr) minmax(0,.65fr); column-gap: 7%; row-gap: 12px; padding: 68px 0 90px; border-bottom: 1px solid var(--line); }
.univ-experience > h2 { grid-column: 1 / -1; margin-bottom: 22px; font-size: clamp(2.8rem, 4.6vw, 4.9rem); max-width: 1100px; }
.univ-explication { min-width: 0; padding-top: 14px; }
.univ-explication > p { font-size: 17px; line-height: 1.8; }
.univ-manipulation { min-width: 0; }
.univ-demonstration { display: none; min-width: 0; margin: 0; }
.univers-js .univ-demonstration { display: block; }
.univ-demonstration canvas { display: block; width: 100%; height: clamp(300px,25vw,380px); }
.univ-demonstration figcaption { font: 12px/1.7 var(--sans); color: var(--muted); text-align: center; margin-top: 12px; }
.univ-controles { display: none; font: 14px/1.5 var(--sans); margin-top: 30px; }
.univers-js .univ-controles { display: block; }
.univ-controles label { display: block; }
.univ-controles output { float: right; color: var(--or); font-variant-numeric: tabular-nums; }
.univ-controles input[type="range"] { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 6px 0; background: transparent; cursor: pointer; }
.univ-controles input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,var(--or) var(--range,50%),var(--line) var(--range,50%)); }
.univ-controles input[type="range"]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; margin-top: -7.5px; background: var(--bg); border: 2px solid var(--or); border-radius: 50%; box-shadow: 0 0 16px #dfc58f22; }
.univ-controles input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }
.univ-controles input[type="range"]::-moz-range-progress { height: 2px; background: var(--or); }
.univ-controles input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; background: var(--bg); border: 2px solid var(--or); border-radius: 50%; }
.univers-js .coordonnees { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.univ-presets { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 12px; }
.univ-presets button { border: 0; border-bottom: 1px solid transparent; padding: 6px 0; color: var(--muted); background: none; cursor: pointer; min-height: 36px; font-size: 12px; }
.univ-presets button[aria-pressed="true"] { color: var(--or); border-color: var(--or); }
.univ-precision { font: 12px/1.6 var(--sans); color: var(--muted); }
.univ-resultat { font: 15px/1.7 var(--sans); margin-top: 16px !important; font-variant-numeric: tabular-nums; }
.univ-comparaison { display: flex; gap: 24px; justify-content: space-between; margin: 24px 0; color: var(--muted); font: 13px/1.6 var(--sans); }
.univ-comparaison > span { width: 50%; }
.univ-comparaison strong { display: block; font: 400 clamp(2.3rem,4vw,4.4rem)/1.2 var(--serif); color: var(--fg); margin-top: 12px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.univ-comparaison > span:last-child strong { color: var(--or); }
.univ-observation { font: 15px/1.6 var(--sans); color: var(--or); margin-top: 25px !important; }
.univ-hypotheses { margin-top: 30px; }
.univ-hypotheses > div { padding: 26px 0; border-bottom: 1px solid var(--line); }
.univ-hypotheses > div:first-child { padding-top: 0; }
.univ-hypotheses > div:last-child { border: 0; }
.univ-hypotheses p { color: var(--muted); margin-bottom: 0; }
.univ-sources { display: grid; grid-template-columns: .43fr .57fr; gap: 12%; padding: 100px 0 20px; }
.univ-sources h2 { font-size: clamp(3rem,4vw,4.2rem); }
.univ-sources > div { font: 14px/1.8 var(--sans); color: var(--muted); }
.univ-sources details { margin-bottom: 28px; }
.univ-sources ul { list-style: none; padding: 0; margin: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.univ-sources li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.univers > .pied-site { max-width: none; margin: 60px var(--marge) 0; }
@media (min-width: 1800px) { .univers { --marge: max(80px,calc((100vw - 1600px)/2)); } }
@media (max-width: 1100px) {
  .univers { font-size: 17px; }
  .univ-texte { max-width: 40%; }
  .univ-ouverture .univ-texte { max-width: 57%; }
  .univ-chapitres { gap: 26px; }
  .univ-experience { column-gap: 4%; grid-template-columns: .4fr .6fr; }
  .univ-sources { column-gap: 6%; }
}
@media (max-width: 760px) {
  .univers { --nav-height: 64px; --marge: 24px; --scene-mobile: min(44svh,86vw); font-size: 16px; }
  .barre-univers { min-height: 140px; gap: 6px; flex-wrap: wrap; padding: 16px 0; }
  .barre-univers h1 { font-size: clamp(70px,18vw,110px); margin: 0; }
  .barre-univers nav { margin-left: 0; width: 100%; gap: 24px; }
  .barre-univers nav a { padding: 4px 0; font-size: 12px; }
  .univ-sommaire { gap: 8px; flex-wrap: nowrap; padding: 0 0 0 var(--marge); }
  .univ-chapitres { gap: 20px; padding-right: 12px; }
  .univ-sommaire a { padding: 10px 0; font-size: 12px; }
  .univ-sommaire a[aria-current]::after { bottom: 3px; }
  #univ-motion { padding: 12px; flex-shrink: 0; }
  .univ-motion-icon { width: 9px; height: 10px; }
  .univers h2 { font-size: clamp(2.65rem,8vw,3.6rem); }
  .univ-etape h2 { width: 100%; }
  .univ-texte, .univ-ouverture .univ-texte { width: 100%; max-width: 100%; }
  .univ-ouverture h2 { font-size: clamp(2.7rem,8.6vw,4.3rem); }
  .univ-ouverture h2 span { white-space: normal; }
  .univers-js .univ-scenes { height: var(--scene-mobile); margin-bottom: calc(-1 * var(--scene-mobile)); z-index: 3; background: var(--bg); }
  .cosmos-legende { bottom: 12px; right: var(--marge); font-size: 10px; }
  .univ-schema figcaption { font-size: 10px; margin-top: 0; }
  .univ-art-layer { inset: 0 -3%; }
  .univ-art-layer .univ-illustration { max-width: calc(var(--scene-mobile) * 1.42); justify-self: center; }
  .univ-illustration figcaption { font-size: 10px; margin-top: 9px; }
  .univ-art-labels { font-size: 10px; gap: 8px; padding-inline: 7%; margin-top: -5px; }
  .univ-scenes[data-scene="apercu"] .univ-art-layer { transform: none; }
  .univers-js .univ-ouverture { padding: calc(var(--scene-mobile) + 22px) var(--marge) 50px; min-height: calc(100svh - 200px); align-items: flex-start; }
  .univers-js .univ-etape { min-height: calc(100svh - var(--nav-height)); align-items: flex-start; padding: calc(var(--scene-mobile) + 28px) var(--marge) 90px; }
  .univers .univ-etape[id] { scroll-margin-top: var(--nav-height); }
  .univ-date { font-size: 12px; margin-bottom: 20px !important; }
  .univ-source { margin-top: 20px !important; }
  .univ-experience { grid-template-columns: 1fr; gap: 18px; padding: 54px 0 64px; }
  .univ-experience > h2 { margin-bottom: 6px; font-size: clamp(2.6rem,7.5vw,3.5rem); }
  .univ-explication { padding: 0; }
  .univ-explication > p { font-size: 16px; line-height: 1.75; }
  .univ-demonstration canvas { height: 290px; }
  .univ-controles { margin-top: 20px; font-size: 13px; }
  .univ-comparaison { font-size: 11px; gap: 12px; }
  .univ-comparaison strong { font-size: clamp(2.1rem,8.3vw,3rem); }
  .univ-sources { grid-template-columns: 1fr; gap: 24px; padding: 54px 0; }
  .univ-hypotheses h3 { font-size: 25px; }
  .univ-sources ul { grid-template-columns: 1fr; }
  .univers > .pied-site { margin-top: 0; margin-bottom: 45px; }
}
@media (max-width: 380px) {
  .univers { --marge: 20px; }
  .univ-chapitres { gap: 16px; }
  .univ-sommaire a { font-size: 11px; }
  .univ-experience > h2 { font-size: 2.4rem; }
  .univ-controles output { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .univ-illustration, .univ-photons path { animation: none !important; }
}
@media print {
  .univ-scenes, .univ-sommaire, .univ-controles, .univ-presets { display: none !important; }
  .univers { color: #111; background: white; }
  .univers-js .univ-etape, .univers-js .univ-ouverture { min-height: 0; padding: 30px 0; }
  .univ-texte, .univ-ouverture .univ-texte { max-width: none; width: 100%; }
  .univ-experience, .univ-sources { display: block; padding: 30px 0; }
}

@media (min-width:761px) { #histoire[data-intro="true"] .cosmos-legende { bottom: 200px; } }

/* Le cerveau et les frontières : même scène fixe, des questions pour finir. */
.univ-controles-etape { display: none; max-width: 380px; margin: 4px 0 8px; }
.univers-js .univ-controles-etape { display: block; }
.univ-controles-etape .univ-precision { margin: 14px 0 0; max-width: 34ch; }
.univ-etape-question .univ-reponse { font: 400 clamp(2rem,2.9vw,2.85rem)/1.14 var(--serif); letter-spacing: -.03em; margin: 0 0 8px; max-width: 17ch; text-wrap: balance; }
.univ-suite { margin: 26px 0 0 !important; font: 14px/1.5 var(--sans); }
.univ-suite a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.univ-suite a:hover { color: var(--fg); }
.univ-suite .fleche { width: 16px; height: 16px; }
.univ-histoire-cerveau .univ-ouverture h2 span { white-space: normal; }

/* Les articles, rangés dans l'ordre du parcours. */
.univ-articles { margin-inline: var(--marge); padding: 110px 0 70px; border-bottom: 1px solid var(--line); }
.univ-articles > h2 { font-size: clamp(3rem,4.6vw,4.9rem); margin-bottom: 64px; }
.univ-articles-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 56px; }
.univ-theme h3 { margin: 0 0 20px; font: 400 clamp(1.7rem,2.2vw,2.1rem)/1.15 var(--serif); letter-spacing: -.02em; }
.univ-theme h3 a { color: var(--fg); text-decoration: none; }
.univ-theme h3 a:hover { color: var(--accent); }
.univ-theme ul { list-style: none; padding: 0; margin: 0; }
.univ-theme li { border-top: 1px solid var(--line); }
.univ-theme li a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 16px; align-items: start; padding: 14px 0; font: 15px/1.55 var(--sans); color: var(--muted); text-decoration: none; }
.univ-theme li a:hover { color: var(--fg); }
.univ-theme li .fleche { width: 16px; height: 16px; margin-top: 3px; }
@media (max-width: 1100px) { .univ-articles-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 44px; } }
@media (max-width: 760px) {
  .univ-etape-question .univ-reponse { font-size: clamp(1.9rem,7vw,2.4rem); }
  .univ-articles { padding: 70px 0 50px; }
  .univ-articles > h2 { margin-bottom: 40px; }
  .univ-articles-themes { grid-template-columns: 1fr; gap: 48px; }
}
@media print { .univ-controles-etape { display: none !important; } .univ-articles-themes { display: block; } }