*{box-sizing:border-box}
body{margin:0 auto;font-family:system-ui, sans-serif;background:#ccc;font-weight:700}
#bande{position:sticky;top:0}
#wrap, header{display:block;margin:0 auto;width:1024px}
header{padding:5px;background:none top / 100% no-repeat #066;transition:background-image 1s}
main{margin:0 5px 5px;line-height:1.5em;clear:both}
article{margin:9px 5px;padding:0 9px 9px;background:#fff;border:1px solid;border-radius:8px;box-shadow:0 5px 9px #555}
aside img{width:auto;margin:5px 0 0 0}
footer{background:#066;padding:3px;font-size:.8em;color:#fff}
h1{font-size:2em;color:#066}
h2,h3{font-size:1.2em}
h1,h2{margin:7px 2px;padding:5px 0;border-bottom:6px solid #066}
.centre{text-align:center}
a{color:#03c}
a img{vertical-align:middle;display:inline-block;margin:2px}
a:hover{color:#000}
img{margin:5px;max-width:100%;height:auto}
.container{display:flex;margin:9px 0}
.container p{margin:0 5px}
.smalldroit{float:right;font-size:.7em;text-align:right;font-weight:400;padding:0 0 0 5px}
.insertcadre{margin:9px 3px;padding:9px;border:1px solid;border-radius:4px}
.jaune{background:#ff0}
.jauneclair{background:#ffa}
.mandarine{background:#fc0}
.rose{background:#aaf}
.postit{width:180px;float:left;margin:6px;padding:6px;box-shadow:0 5px 9px #555}
.large{width:320px}
.postit h3{margin:0 0 9px;border-bottom:3px solid #066}
.postit>img{margin:auto;display:block}
.hidden, span.email b{display:none}
.pdf::before{content:url(img/pdf2026.gif);vertical-align:-0.3em}
.photo::before{content:url(img/photo2026.gif);vertical-align:-0.3em}
.calendrier::before{content:url(img/calendrier2026.gif);vertical-align:-0.3em}
.pdf::after, .photo::after, .calendrier::after {content:" \00bb"}

.tableau{display:inline-block;vertical-align:top;font-size:.9em}
table{margin:0 9px 16px 0;padding:0;line-height:1.3em;border-collapse:collapse;font-weight:400}
caption{margin:9px 0;font-size:1.15em;font-weight:700}
th,td{padding:7px;text-align:center;border:1px solid}
.entete{background:#066;color:#fff}
tbody tr:nth-child(odd), tfoot{background:#fff}
tbody tr:nth-child(even){background:#ccc}
table a{font-weight:700}

#scrollup{position:fixed;bottom:12px;right:12px;background:#088;z-index:800;width:40px;height:40px;border:3px solid #fff;border-radius:8px;display:none}
.arrowtop{border-style:solid;border-width:4px 4px 0 0;border-color:#fff;padding:7px;rotate:-45deg;margin:12px 10px 0 4px;display:inline-block;width:0;height:0}

/*nav PC*/
label, #drop{display:none}
nav{display:block;padding:5px 0 5px;font-size:.9em;line-height:38px}
nav a{display:block;padding:0 7px;color:#fff;list-style:none;text-decoration:none}
#menu{padding:0;margin:0;position:relative}
#menu, #menu ul{background:#088;border:2px solid #fff;border-radius:8px;box-shadow:2px 5px 9px #222}
#menu li{display:inline-block}
#menu li a{border-radius:6px}
#menu li a:hover{background:#cff}
#menu ul{display:none;position:absolute;top:34px;padding:0}
#menu li:hover>ul{display:inherit}
#menu ul li{width:auto;display:list-item;position:relative}
#menu ul li a{background:#066}
#menu ul li a.active{background:#900}
.arrow{border-style:solid;border-width:4px 4px 0 0;padding:4px;transform:rotate(135deg) skew(7deg, 7deg);margin:12px 0 0 9px;display:inline-block;
float:right;width:0;height:0}
.active{background:#900}

#Box-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:99;background:#222}
#Box-overlay.visible{opacity:1}
#Box-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}
#Box-overlay .full-image figure{display:inline;margin:0}
#Box-overlay .full-image img{display:inline-block;max-height:98%;max-width:98%;vertical-align:middle;padding:3px;background:#eee}
#Box-overlay .full-image::before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}
#Box-overlay .full-image figcaption{display:block;position:absolute;top:0;background:#222;margin:0 48%;padding:0 5px;border:2px solid #fff;text-align:center;color:#eee}

#Box-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;transition:left 1s ease, transform .6s ease}
#Box-slider.bounce-from-right{animation:bounceR 0.4s ease-out}
#Box-slider.bounce-from-left{animation:bounceL 0.4s ease-out}
@keyframes bounceR{0%{margin-left:0}50%{margin-left:-30px}100%{margin-left:0}}
@keyframes bounceL{0%{margin-left:0}50%{margin-left:30px}100%{margin-left:0}}
.Box-button{position:absolute;cursor:pointer;padding:0;margin:0;border:0;background:transparent}
.Box-button svg{position:absolute;left:0;top:0}
#previous-button, #next-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}
#next-button{right:2%}
#previous-button{left:2%}
#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}

@media all and (max-width:1024px){
#wrap, header{width:auto}
header{display:flex;flex-direction:row-reverse;justify-content:space-between;aspect-ratio:6/1}
header>a{max-width:70%}

.liste-gallery img, .liste-photos img, .liste-images img{width:150px}
img .vertical{width:100px}
/*nav mobile*/
nav{padding:0}
label{display:block;padding:0;color:#fff;transition:1s}
#menu{display:none}
#menu li{display:block}
.arrow{transform:rotate(45deg) skew(7deg, 7deg);margin:12px 0 0 5px}
.drap{float:left;display:block;width:26px;height:26px;background:url(img/hamb-2025-blanc.gif) bottom left no-repeat;margin:5px 5px 0 0;transition:1s;transition-property:background-position}
input:checked+label{color:#066;transition:1s}
input:checked+label>.drap{background-position:0 0}
input:checked~#menu{display:block;position:absolute;z-index:9}
/*sub*/
#menu li ul{position:absolute;display:none;left:96%;list-style:none;top:0;margin:0}
#menu li ul li a{width:150px}
#menu li:hover>ul{display:block}

}