*{box-sizing:border-box}
body{margin:0 auto;font-family:system-ui, sans-serif;background:#ccc}
#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}
header>img{margin:0 0 0 99px}
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}
h2{margin:5px 2px;padding:5px 0;border-bottom:7px solid #066}
.centre{text-align:center}
a{color:#03c;font-weight:700}
a img{vertical-align:middle;display:inline-block;margin:2px}
.noir, a:hover{color:#000}
ul,a{list-style:none;text-decoration:none}
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;font-weight:700}
.jaune{background:#ff0}
.jauneclair{background:#ffa}
.rose{background:#fbf}
.blue{background:#9ff}
.mandarine{background:#fc0}
.degrade-orange-jaune{background:#ff0;background:linear-gradient(120deg,#fa0,#ffd)}
.degrade-jaune{background:#ff0;background:linear-gradient(120deg,#ef0,#ffd)}
.degrade-mandarine{background:#fc0;background:linear-gradient(120deg,#fa0,#ffd)}
.degrade-rose{background:#fbf;background:linear-gradient(120deg,#f7f,#fbf)}
.degrade-blue{background:#9ff;background:linear-gradient(120deg,#9bf,#9ff)}
.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{border:none;position:fixed;bottom:12px;right:12px;background:url(img/mouflon-new.png) bottom left no-repeat;z-index:80;width:99px;height:74px;display:none}
#scrollup:hover{background-position:0 0}

body.hidden-scroll{overflow:hidden}
.sl-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:#000;display:none;z-index:93}
.sl-wrapper{z-index:94}
.sl-wrapper button{border:0 none;background:transparent;padding:0;cursor:pointer}
.sl-wrapper .sl-close{display:none;position:fixed;right:2%;top:20px;z-index:99;width:30px;height:30px}
.sl-wrapper .sl-counter{display:none;position:fixed;top:20px;left:2%;z-index:99;background:#000;color:#fff;font-size:1em;padding:3px;border:2px solid #fff}
.sl-wrapper .sl-navigation{width:100%}
.sl-wrapper .sl-navigation button{position:fixed;top:48%;display:block;z-index:99;width:44px;height:66px}
.sl-wrapper .sl-navigation button.sl-next{right:2%}
.sl-wrapper .sl-navigation button.sl-prev{left:2%}
.sl-wrapper.sl-dir-rtl .sl-navigation{direction:ltr}
.sl-wrapper .sl-image{position:fixed;-ms-touch-action:none;touch-action:none;z-index:97} 
.sl-wrapper .sl-image img{margin:0;padding:3px;background:#eee;display:block;border:0 none;width:100%;height:auto}
.sl-transition{transition:transform ease .2s}

/*nav PC*/
label, #drop{display:none}
nav{display:block;padding:5px 0 5px;font-size:.9em;line-height:38px;font-weight:700}
nav a{display:block;padding:0 9px;color:#fff}
#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}

@media all and (max-width:1024px){
#wrap, header{width:auto}
header{aspect-ratio:4.5}
header>img{float:right;margin:5px 0;max-width:85%}
.sl-wrapper .sl-navigation button{visibility:hidden;color:transparent}
a>img{width:150px}
/*nav mobile*/
nav{padding:0}
#menu{display:none}
label, #menu li{display:block}
.arrow{transform:rotate(45deg) skew(7deg, 7deg);margin:12px 0 0 5px}
.drap{display:block;width:30px;height:30px;background:url(img/hamb-2026-30-80.gif) bottom left no-repeat;margin:9px;transition:1s;transition-property:background-position}
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%;top:0;margin:0}
#menu li ul li a{width:150px}
#menu li:hover>ul{display:block}

}
/*
classes pour les images
.liste-gallery 
.liste-images
.liste-photos
.liste-pictures
.liste-news
.liste-nouvelles
*/