/* DreamerXU - feuille de style (même structure et mêmes classes qu'avant) */
:root{--bg:#e8e8e8;--dark:#2e2e2e;--footer:#525252;--accent:#0ab8f2;--accent-soft:#86dbf0;--text:#696969;--bar-h:70px;
--font-brand:"Comic Sans MS","Comic Neue","Chalkboard SE",cursive;--font-ui:Arial,Helvetica,sans-serif;--font-card:"Bradley Hand","Segoe Print","Comic Sans MS",cursive}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0 auto;background-color:var(--bg);font-family:var(--font-ui)}
body.no-scroll{overflow:hidden}
img{max-width:100%}
ul{list-style:none;margin:0;padding:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:10000;background:#fff;color:#000;padding:10px 14px;font-weight:bold;transition:top .2s}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,img.canBeClik:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px}

/* barres de navigation */
nav.navbar-top,nav.navbar{background-color:var(--dark);height:var(--bar-h);display:flex;justify-content:center;align-items:center;padding:0;margin:0}
nav.navbar-top{position:fixed;top:0;left:0;width:100%;z-index:9998;transition:opacity .3s,visibility .3s}
nav.navbar{position:absolute;z-index:9999;bottom:0;left:2.5%;width:95%}
nav.navbar ul,nav.navbar-top ul{display:flex;justify-content:center;flex-wrap:wrap}
nav.navbar li,nav.navbar-top li{display:flex;justify-content:center}
nav.navbar a,nav.navbar-top a{color:#fff;font-size:20px;display:block;font-family:var(--font-ui);font-weight:bold;margin:0;padding:10px 18px 9px;text-decoration:none;transition:color .3s}
nav.navbar a:hover,nav.navbar-top a:hover,nav.navbar a[aria-current],nav.navbar-top a[aria-current]{color:var(--accent-soft)}

/* en-tête */
header.top-page{background:url("../Images/background/main_background.png") center/cover;height:50vh;min-height:320px;position:relative;display:flex;flex-direction:column}
div.site-logo{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;min-height:0;overflow:hidden;padding-bottom:var(--bar-h)}
a.site-tittle{color:#fff;font-size:clamp(60px,15vw,100px);font-family:var(--font-brand);font-weight:bold;text-decoration:none;line-height:1.6;text-shadow:0 2px 12px rgba(0,0,0,.45)}
p.site-description{color:#fff;font-size:clamp(15px,3.7vw,25px);font-family:var(--font-brand);margin:0 0 20px;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.5)}
nav.link-other-site ul{display:flex;justify-content:center}
nav.link-other-site li{padding:0 10px 0 9px}
nav.link-other-site a{display:block;transition:transform .2s}
nav.link-other-site a:hover{transform:translateY(-3px) scale(1.08)}
nav.link-other-site img{display:block}

/* contenu */
main.main-page{background:url("../Images/background/artwork_background.jpg") center/cover;display:flex;flex-direction:column;align-items:center;padding:20px 0}
div.container{display:flex;flex-direction:column;margin:20px}
.item-link{text-decoration:none}

/* pied de page */
footer.bottom-page{background-color:var(--footer);display:flex;flex-direction:column;align-items:center;padding-bottom:10px}
footer.bottom-page .text{font-family:var(--font-ui);font-size:20px;font-weight:bold;text-transform:uppercase;color:#fff}
footer.bottom-page .year{color:var(--accent)}
footer.bottom-page a{transition:transform .2s}
footer.bottom-page a:hover{transform:translateY(-4px)}

.hidden{opacity:0}
.visible{opacity:1}
nav.navbar-top.hidden{visibility:hidden;pointer-events:none}
@media (max-width:600px){nav.navbar a,nav.navbar-top a{font-size:15px;padding:10px 10px 9px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

div.art-works{width:min(1200px,92%);border:solid black;background-color:#fff}
div.container p.tittle{font-family:var(--font-ui);font-size:40px;margin:1.2em 0 .7em;padding-bottom:6px;border-bottom:1px solid #000;scroll-margin-top:90px}
div.container p.tittle:first-child{margin-top:.4em}
div.container .text{font-family:var(--font-ui);font-size:20px;font-weight:lighter;color:var(--text);margin:0 0 .9em;line-height:1.5}
div.container p.text .bold,div.container .text strong{font-weight:bold;text-transform:uppercase;color:#000}
div.container p.text a{font-weight:bold;text-transform:uppercase;color:var(--accent-soft);text-decoration:none}
div.container ul.toc{margin:0 0 1em}
div.container .toc a{font-family:var(--font-ui);font-size:20px;color:#2b7f94;text-decoration:none;line-height:1.8}
div.container .toc a:hover{text-decoration:underline}
div.container .toc li::before{content:"- ";color:var(--text)}
div.container p.date{font-family:var(--font-ui);font-size:15px;font-weight:lighter;color:#9a9a9a;margin:0 0 1em;display:flex;justify-content:flex-end}
div.container img{margin:0 0 20px;width:100%;max-width:100%;height:auto;user-select:none}
div.container img.canBeClik{cursor:zoom-in}
div.container .gallery{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1%;margin-bottom:20px}
div.container .gallery img{flex:1 1 22%;min-width:140px;width:auto;margin:0}
div.container video.vid{width:80%;margin:0 10% 20px;flex-shrink:0;background:#000}
div.container .gallery video{flex:1 1 45%;min-width:0;width:49%;margin:0}
div.container .vid-yt{display:flex;justify-content:center;margin-bottom:20px}
div.vid-yt iframe{width:80%;aspect-ratio:16/9;height:auto;border:0}
div.app{margin:-10px 0 14px;width:100%;display:flex;align-items:center;justify-content:flex-end;pointer-events:none;user-select:none}
div.app p{font-family:var(--font-ui);font-size:15px;font-weight:bold;text-transform:uppercase;color:#000;margin:0 6px 0 0}
div.container div.app img{width:25px;height:auto;margin:7px 0 7px 7px}
div.zoom-div{position:fixed;inset:0;pointer-events:none;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:10000;transition:opacity .25s;visibility:hidden}
div.zoom-div.visible{pointer-events:auto;visibility:visible}
img.zoom{width:92%;height:92%;object-fit:contain;user-select:none}
button.zoom-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px}
button.zoom-close img{width:100%;height:100%;object-fit:contain}
@media (max-width:700px){div.container p.tittle{font-size:28px}div.container .text,.toc a{font-size:17px}div.container video.vid,div.vid-yt iframe{width:100%;margin-left:0;margin-right:0}div.container .gallery video{width:100%;flex-basis:100%}div.container{margin:12px}}