:root{--aside-width: min(420px, 100vw);--header-height: 56px}@layer base{body{display:flex;flex-direction:column;font-family:var(--font-sans);background:var(--color-fond);color:var(--color-encre)}body>main{flex:1}h1,h2,h3,h4{font-family:var(--font-display)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}@media (max-width: 45em){html:has(.overlay.expanded){overflow:hidden}}.overlay{position:fixed;inset:0;z-index:40;background:#0c0d1152;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease-sortie),visibility .3s}.overlay.expanded{opacity:1;visibility:visible;pointer-events:auto}.overlay .close-outside{position:absolute;top:0;left:0;height:100%;width:calc(100% - var(--aside-width));color:transparent}aside{position:fixed;top:0;right:0;height:100dvh;width:var(--aside-width);display:flex;flex-direction:column;background:var(--color-fond);border-radius:1.25rem 0 0 1.25rem;box-shadow:-24px 0 60px -30px #0c0d1166;transform:translate(100%);transition:transform .38s var(--ease-sortie)}@media (max-width: 27em){aside{border-radius:0}}.overlay.expanded aside{transform:none}aside>header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.375rem;border-bottom:1px solid var(--color-trait)}aside>header h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}aside>header .close{width:2.5rem;height:2.5rem;margin-right:-.5rem;border-radius:9999px;display:grid;place-items:center;font-size:1.375rem;line-height:1;color:var(--color-sourdine);touch-action:manipulation;transition:background-color .15s ease,color .15s ease}aside>header .close:hover{background:var(--color-surface);color:var(--color-encre)}aside>header .close:focus{outline:none}aside>header .close:focus-visible{outline:2px solid var(--color-encre);outline-offset:2px}aside>main{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.sheet-overlay{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease-sortie),visibility .3s}.sheet-overlay.expanded{opacity:1;visibility:visible;pointer-events:auto}.sheet-panel{opacity:0;transform:translateY(10px) scale(.97);transition:transform .3s var(--ease-sortie),opacity .3s var(--ease-sortie)}.sheet-overlay.expanded .sheet-panel{opacity:1;transform:none}.sheet-panel-bas{transform:translateY(100%);transition:transform .34s var(--ease-sortie)}.sheet-overlay.expanded .sheet-panel-bas{transform:none}.sheet-confirm{animation:montee-confirm .34s var(--ease-sortie) both}@media (min-width: 48rem){.sheet-confirm{animation:pose-confirm .3s var(--ease-sortie) both}}@keyframes montee-confirm{0%{transform:translateY(100%)}to{transform:none}}@keyframes pose-confirm{0%{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}@keyframes lever{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.entree{animation:lever .6s var(--ease-sortie) both}.entree-2{animation:lever .6s var(--ease-sortie) .08s both}.entree-3{animation:lever .6s var(--ease-sortie) .16s both}.note-entree{animation:lever .35s var(--ease-sortie) both}@keyframes balayage{0%{transform:translateY(-120%)}to{transform:translateY(520%)}}.balayage{animation:balayage 2.6s var(--ease-sortie) infinite}@keyframes reflet{0%{transform:translate(-160%) rotate(12deg)}to{transform:translate(260%) rotate(12deg)}}.reflet{animation:reflet 1.7s ease-in-out .5s 1 both}@keyframes pouls{0%,to{opacity:.35}50%{opacity:1}}.pouls{animation:pouls 1.6s ease-in-out infinite}@keyframes pop-badge{0%{transform:scale(.6)}60%{transform:scale(1.25)}to{transform:scale(1)}}.pop-badge{animation:pop-badge .35s var(--ease-sortie) both}@keyframes devoilement{0%{opacity:0;transform:scale(.965);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}.devoilement{animation:devoilement .7s var(--ease-sortie) both}@keyframes reflet-devoilement{0%{transform:translate(-160%) rotate(12deg);opacity:1}80%{opacity:1}to{transform:translate(340%) rotate(12deg);opacity:0}}.reflet-devoilement{animation:reflet-devoilement 1.1s var(--ease-sortie) .25s 1 both}@keyframes fondu-oeuvre-a{0%{opacity:.25;filter:blur(6px)}to{opacity:1;filter:blur(0)}}@keyframes fondu-oeuvre-b{0%{opacity:.25;filter:blur(6px)}to{opacity:1;filter:blur(0)}}.fondu-oeuvre-a{animation:fondu-oeuvre-a .22s var(--ease-sortie) both}.fondu-oeuvre-b{animation:fondu-oeuvre-b .22s var(--ease-sortie) both}.grain{position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:180px 180px;opacity:.05}.grain-nuit{opacity:.1}.apparition{opacity:0;transform:translateY(24px)}.apparition,.apparu{transition:opacity .75s var(--ease-sortie),transform .75s var(--ease-sortie)}.apparu{opacity:1;transform:none}.contour{-webkit-text-stroke:1.5px oklch(84% .008 270);color:transparent;transition:-webkit-text-stroke-color .4s ease}.etape-contour:hover .contour{-webkit-text-stroke-color:var(--color-braise)}.trace-braise{stroke-dasharray:260;stroke-dashoffset:260;animation:tracer .9s var(--ease-sortie) .7s forwards}@keyframes tracer{to{stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.entree,.entree-2,.entree-3,.balayage,.reflet,.pouls,.pop-badge,.note-entree,.devoilement,.reflet-devoilement,.fondu-oeuvre-a,.fondu-oeuvre-b,.sheet-confirm{animation:none}.overlay,aside,.sheet-overlay,.sheet-panel,.sheet-panel-bas{transition-duration:.01s}.trace-braise{animation:none;stroke-dashoffset:0}.apparition{opacity:1;transform:none;transition:none}}