/* 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:100vh;min-height:480px;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{padding:20px 0}
div.container{margin:0 20px;background-color:#fff;border:solid black}
.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{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-items:stretch;justify-items:stretch}
.item-link{display:block;width:100%;overflow:hidden}
.item{aspect-ratio:1.2/2;background-position:center center;background-size:cover;transition:transform .5s}
.item-link:hover .item{transform:scale(1.04)}
.item-text{width:100%;height:100%;background-color:rgba(56,56,56,.7);opacity:0;transition:opacity .3s;display:flex;flex-direction:column;justify-content:flex-start;padding:10px}
.item-link:hover .item-text,.item-link:focus-visible .item-text{opacity:1}
@media (hover:none){.item-text{opacity:1;justify-content:flex-end;background:linear-gradient(transparent 40%,rgba(30,30,30,.85))}}
.item-tittle{color:#fff;font-size:20px;font-family:var(--font-card);font-weight:bold;text-align:center;margin:0 0 4px}
.item-type{color:#fff;font-size:14px;font-family:var(--font-card);font-weight:lighter;text-align:center;margin:0 0 14px}
.item-description{color:#fff;font-size:14px;font-family:var(--font-card);font-weight:lighter;text-align:center;margin:0}
.other{background-color:#d3e8e7;display:flex;justify-content:center;border:5px solid #fff;padding:10px}
ul.other-nav{width:min(100%,700px);display:flex;justify-content:space-around;flex-wrap:wrap;gap:10px}
ul.other-nav li{display:flex;flex-direction:column;align-items:center;width:200px;font-family:var(--font-ui)}
div.other-div{display:flex;flex-direction:column;align-items:center}
p.other-tittle{font-weight:bold;font-size:17px;text-align:center;margin:0}
p.other-stat{font-weight:lighter;font-size:80px;margin:0;line-height:1.1}