#infos{text-align:center;padding:.5em 1em;font-family:Segoe Print,Bradley Hand,Chilanka,TSCu_Comic,casual,cursive}#mediasGallery{grid-template-columns:repeat(auto-fill,minmax(min(50ch,100%),1fr));grid-auto-flow:dense;gap:1ch;padding-inline:1ch;display:grid;container-type:inline-size}figure{cursor:pointer;border:1px solid #0000;border-radius:4px;width:100%;min-width:5em;min-height:10em;transition:all 1s;position:relative;&:hover{border-color:unset;&:before{opacity:.5}& figcaption{opacity:0;pointer-events:none}& .badgeVideo{opacity:1}}&[data-orientation="1"]{grid-row:span 2}&.stoppedAtMedia{animation:.5s scaleToNormal;animation-timing-function:linear(0, .49 7.4%, .864 15.3%, 1.005 19.4%, 1.12 23.7%, 1.206 28.1%, 1.267 32.8%, 1.296 36.4%, 1.311 40.2%, 1.313 44.2%, 1.301 48.6%, 1.252 56.9%, 1.105 74.4%, 1.048 82.5%, 1.011 91.1%, 1)}}[data-orientation="2"]{grid-column:1/-1;& .media{animation:20s ease-in-out infinite alternate landscapeScroll}}@container (width>200ch){[data-orientation="2"]{grid-column:span 4}}@keyframes landscapeScroll{0%{object-position:0% 50%}to{object-position:100% 50%}}@keyframes scaleToNormal{0%{scale:1.5}}figcaption{background-color:hsl(from var(--accent-color) h s l / .5);backdrop-filter:blur(10px);color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:100%;padding:.5em 1em;font-size:1em;font-style:italic;transition:all .5s;position:absolute;bottom:0;overflow-x:clip}.mediaNumbering{color:#fff;background-color:#0008;justify-content:center;align-items:center;margin:0;font-size:5em;display:flex;position:absolute;inset:1em}.media{object-fit:cover;border-radius:4px;width:100%;height:100%}.badgeVideo{color:light-dark(#000,#fff);opacity:.6;background-color:light-dark(#fff,#000);border-radius:.4em;justify-content:center;align-items:center;width:2em;height:2em;transition:all .5s;display:flex;position:absolute;top:.5em;right:.5em}#endOfPage{border:2px dashed #8888;max-width:20ch;margin-block:2em}body:has(#mediaViewer[open]){overflow-y:hidden}#mediaViewer{width:100%;max-width:unset;color:#fff;background-color:#111;border:none;border-radius:0;height:100%;padding:0;&[open]{display:flex}@starting-style{transform:translateY(1em)scale(.8)}}#viewerWrapper{grid-template-rows:auto 1fr;width:100%;display:grid}#topBar{grid-template-columns:auto auto 1fr auto auto;align-items:stretch;display:grid;& button{height:2.5em;width:unset;padding-inline:.5em}}.app-dialog .dialogCloseBtn{position:relative}#toggleDetails{border-bottom:2px solid #0000;margin-inline-start:.5em;position:relative;&[data-active=true]:after{content:"";aspect-ratio:1;background-color:#00cb32;border-radius:1em;width:.5em;display:block;position:absolute;bottom:0}&[data-active=false][data-has-details=true]{animation:2s infinite detailsAvailable}}@keyframes detailsAvailable{0%,to{background-color:#fff3}50%{background-color:#0000}}#toggleSlideshow{&[data-active=false] #slideStop,&[data-active=true] #slideStart{display:none}}#slideshowTimer{background-image:linear-gradient(to right, var(--accent-color) 50%, transparent 50%);height:2px;animation:slideshowTimer var(--timerDuration,5s) linear forwards;background-position-x:100%;background-size:200% 100%;display:none;position:absolute;inset-inline:0;&.reset{animation:.5s flashReset}}@keyframes slideshowTimer{to{background-position-x:0%}}@keyframes flashReset{0%{background-color:#fff}}#viewerWrapper:has(#toggleSlideshow[data-active=true]){& button{opacity:.5}& #slideshowTimer{display:block}}#toggleFullscreen{margin-inline-start:1ch;position:relative;&:after{content:"F11" / "F11 pour basculer le mode plein écran";font-size:60%;position:absolute;bottom:0;left:0;right:0}}[data-locale=en] #toggleFullscreen:after{content:"F11" / "Press F11 to toggle fullscreen"}.viewerBtn{border:none;border-radius:0;margin:0;&:not(:disabled):hover,&:not(:disabled):focus{background-color:hsl(from var(--accent-color) h s l / .5);box-shadow:none;transform:none}}#navPart{grid-template-columns:auto 1fr auto;grid-template-areas:"prev media next";place-items:center;display:grid}.navBtn{align-self:stretch;margin-block:.5em;transition:background-color .5s,rotate .2s}#previousMediaBtn{transform-origin:0}#previousMediaBtn:active{grid-area:prev;rotate:y 20deg}#nextMediaBtn{transform-origin:100%}#nextMediaBtn:active{grid-area:next;rotate:y -20deg}#viewerMediaLink{cursor:zoom-in;grid-area:media;display:block;position:relative;&[data-visible=false]{display:none}}#viewerImg{width:auto;max-height:94vh}#viewerImgBlur{z-index:-1;filter:blur(5em);opacity:.5;width:100%;height:100%;position:absolute;inset:0}#viewerVideo{width:auto;max-height:94vh}#endScreen{text-align:center;grid-area:media;display:none;&[data-visible=true]{display:block}& h2{margin:0;font-size:clamp(1.5em,4vw,4em)}}#endActionCont{flex-direction:column;gap:.2em;display:flex;& button,& a{flex-direction:column;flex:1;padding:1em 1em .5em;display:flex}& form{display:flex}}#viewerMetaWrapper{backdrop-filter:blur(10px);inset-inline:0;background-color:#0008;padding:1em;transition:all 1s;position:absolute;bottom:0;&:has(#viewerMeta:empty){translate:0 100%}}#viewerMeta{text-align:center;max-width:150ch;margin-inline:auto}#noMedia{text-align:center;opacity:.7;grid-column:1/-1;font-size:1.5em;font-style:italic;line-height:2}