html,body {margin:0; padding:0; width:100%; height:100%; -webkit-font-smoothing: antialiased;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}
body {color:#222; font-family:museo500,Arial; font-size:16px; background:#fff;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal; font-family:museo500;}
:root{scrollbar-color: #00add3 #fff !important;scrollbar-width: thin !important;}
.left {float:left;}
.right {float:right;}
.right img {vertical-align:middle;}
.right::after {clear:both;}
.tright {float:right;}
.clear {clear:both;}
a {text-decoration:none; cursor:pointer; color:#222;}
#superhead{position:absolute; width:100%; height:40px; padding:10px 0; line-height:40px; background:#fff; z-index:98; color:#29516b; font-size:18px;}
#superhead img {position:relative; display:inline-block; vertical-align:middle; left:30%;}
#superhead span {position:absolute;right:0;}
#header {position:relative; width:100%; text-align:center; height:calc(100% - 100px); overflow:hidden;}
.fixhead {height:400px !important;}
.fixhead #se2022 {transform:scale(0.6); transform-origin:bottom center; bottom:0;}
#logo_ccse {position:relative;z-index:99; width:160px; height:100px; background:#fff; padding:15px 30px 20px 30px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;}
.fixlogo {transform:scale(0.6); transform-origin:top center;}
#sep {position:absolute; width:100%; height:95px; background:url('/ima/sep.png') center center; bottom:0; z-index:60; filter:drop-shadow(0px -5px 5px white);}
#clouds {position:absolute; width:100%; height:100%; top:0; left:0; background:url('/ima/clouds.jpg'); animation-name: backgroundScroll; animation-duration:120s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes backgroundScroll {from {background-position: 0 0;} to {background-position:-1500px 0;}}
.s {position:relative; max-width:1400px; width:calc(100% - 20px); height:100%; margin:auto;}
#garcon {position:absolute; bottom:0; left:0; z-index:50; background:url('/ima/garcon.png'); width:460px; height:700px;}
#fille {position:absolute; bottom:180px; right:0; z-index:50; background:url('/ima/fille.png'); width:300px; height:322px;}
#vacancesactives {position:absolute; left:calc(50% - 300px); top:25%; background:url('/ima/vacancesactives.png'); width:600px; height:236px; z-index:40;}
#se2022 {position:absolute; left:calc(50% - 580px); bottom:110px; background:url('/ima/se2022.png'); width:553px; height:634px; z-index:40;}

.diapo {position:absolute; width:100%; height:100%; top:0; left:0;}
.diapo img {position:absolute; min-width:100%; min-height:100%; width:auto; height:auto; top:50%; left:50%; transform:translate(-50%,-50%);}
.leaves {animation: leaves 8s ease-in-out infinite alternate; display:block; overflow:hidden;}
@keyframes leaves { 0% { transform: scale(1.0); -webkit-transform: scale(1.0);} 100% {transform: scale(1.05);-webkit-transform: scale(1.05);}}
.fixdiapo {height:400px;}

#main {position:relative; margin:-260px auto 20px auto; width:100%; max-width:1440px; z-index:70; text-align:justify;}
#page {position:relative; margin:20px auto; width:100%; max-width:1440px; background:#fff; z-index:70; border-radius:20px; text-align:justify; font-size:0;}
.content {font-size:16px;}
.pdf {display:inline-block; vertical-align:middle;}

#recherche {position:relative; background:#29516b; padding:20px; border-radius:8px; font-size:0; margin:0 20px;}
.fixrecherche {position:fixed !important; top:0px; z-index:99; width:calc(100% - 80px); max-width:1360px; border-top-left-radius:0 !important; border-top-right-radius:0 !important;}
#recherche h1 {font-size:30px; font-weight:bold; color:#fff; margin-bottom:10px;}
#recherche .select {width:calc(20% - 10px); background:#fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; color:#29516b; font-family:museo500,Arial; font-size:18px; padding:10px 40px 10px 20px; border-radius:4px; margin-right:10px; background-image: linear-gradient(45deg, transparent 50%, #29516b 50%), linear-gradient(135deg, #29516b 50%, transparent 50%),linear-gradient(to right, #fff, #fff); background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) 0.5em; background-size:5px 5px,5px 5px,1px 1.5em;background-repeat: no-repeat;box-shadow: none !important;-webkit-box-shadow: none;}
input:focus, textarea:focus, select:focus, *:focus {outline:none;}
#stages, #loisirs {position:relative; margin:40px 10px 0 10px;}
.fixstages, .fixloisirs {margin-top:170px !important;}
#stages h2 {background:#f9b22a; padding:10px 20px; color:#fff; font-size:20px; border-radius:8px; margin:20px 10px;}
.case {display:inline-block; vertical-align:top; position:relative; width:calc(25% - 42px); padding:10px; margin:10px; border-radius:8px; transition:0.3s; overflow:hidden; color:#222; font-size:16px; text-align:justify; border:1px solid #ddd;}
.case:hover {border:1px solid #f9b22a;}
.case h3 {display:block; font-family:museo500,Arial; font-size:28px; font-weight:bold; color:#29516b; margin-bottom:10px;}
.case h4 {display:block; font-family:museo500,Arial; font-size:16px; font-weight:bold; color:#f9b22a;}
.case h5 {display:block; font-family:museo500,Arial; font-size:14px; margin-bottom:10px; color:#f9b22a; min-height:34px;}
.case .ima {position:relative; width:100%; border-radius:4px; overflow:hidden; margin-bottom:10px;}
.case .area {color:#555; margin-bottom:10px; min-height:58px; cursor:pointer;}
.case .plus, .moredate {cursor:pointer; vertical-align:middle;}
.case h6 {display:block; font-family:museo500,Arial; font-size:16px; color:#29516b; font-weight:bold;}
.case h6.voirmoredate {display:none;}
.case h7 {display:block; margin:10px 0; font-family:museo500,Arial; font-size:12px; color:#555;}
.case .bouton {display:block; text-align:center; border-radius:4px; padding:10px; background:#29516b; color:#fff;}
.rouge {background:#e00006 !important;}

#recherchel {position:relative; background:#29516b; padding:20px; border-radius:8px; font-size:0; margin:0 20px;}
.fixrecherchel {position:fixed !important; top:0px; z-index:99; width:calc(100% - 80px); max-width:1360px; border-top-left-radius:0 !important; border-top-right-radius:0 !important;}
#recherchel h1 {font-size:30px; font-weight:bold; color:#fff; margin-bottom:10px;}
#recherchel .select {width:calc(20% - 10px); background:#fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; background:#fff; color:#29516b; font-family:museo500,Arial; font-size:18px; padding:10px 40px 10px 20px; border-radius:4px; margin-right:10px; background-image: linear-gradient(45deg, transparent 50%, #29516b 50%), linear-gradient(135deg, #29516b 50%, transparent 50%),linear-gradient(to right, #fff, #fff); background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) 0.5em; background-size:5px 5px,5px 5px,1px 1.5em;background-repeat: no-repeat;box-shadow: none !important;-webkit-box-shadow: none;}
#loisirs h2 {display:block; position:relative; background:#f9b22a; padding:10px 20px; color:#fff; margin:20px 10px; font-size:30px; border-radius:8px;}
.casel {display:block; position:relative; transition:0.3s; overflow:hidden; color:#222; font-size:16px; text-align:justify; border:1px solid #ddd; margin:20px 10px; border-radius:8px;}
.scasel {display:inline-block; vertical-align:top; width:calc(25% - 20px); margin:10px;}
.scasel2 {display:inline-block; vertical-align:top; width:calc(50% - 40px); margin:10px; background:#f5f5f5; padding:10px; border-radius:4px; font-size:14px;}
.scasel2 a {color:#f9b22a; font-weight:bold;}
.casel .ima {display:inline-block; vertical-align:middle; width:100%; border-radius:4px; overflow:hidden;}
.casel h3 {display:block; font-family:museo500,Arial; font-size:30px; font-weight:bold; color:#29516b; margin-bottom:10px;}
.casel h4 {display:block; font-family:museo500,Arial; font-size:18px; font-weight:bold; color:#f9b22a; margin-bottom:10px;}
.casel h5 {display:block; font-family:museo500,Arial; font-size:16px; margin-bottom:20px;}
.casel h5 img {display:inline-block; vertical-align:middle; margin:0 10px 2px 0;}
.casel h6 {position:absolute; width:calc(25% - 20px); bottom:10px; font-family:museo500,Arial; font-size:12px; color:#555;}
.casel h6 a {color:#555;}
.casel h5 a:hover, .casel h6 a:hover {text-decoration:underline;}
.message {display:block; position:relative; overflow:hidden; color:#222; font-size:16px; text-align:justify; margin:20px 10px; border-radius:8px; background:#f5f5f5; padding:20px;}

#popup {display:none; position:fixed; left:50%; top:50%; transform: translate(-50%,-50%); z-index:100; width:320px; background:#29516b; padding:10px; border-radius:4px; box-shadow:0px 0px 50px 50px #fff; font-size:16px; color:#fff;}
#popup .text, #popup .textarea {-webkit-appearance:none; font-family:museo500,Arial; color:#222; border:0; font-size:16px; width:calc(100% - 16px); margin:5px 0; padding:8px; border-radius:4px; font-weight:bold;}
.vert {display:inline-block; font-family:museo500,Arial;font-size:18px; color:#fff; border:0; padding:5px 10px; border-radius:4px; transition:0.4s all ease;background:#2db02d;cursor:pointer;}
.vert:hover {background:#1c6a1a;}
.g-recaptcha{margin:5px 0;text-align:center;display:inline-block;}

#bas {position:relative; width:100%; padding:10px 0; background:#fff;}
#absbas {position:relative; width:100%; padding:20px 0; background:#222; color:#fff;}
#absbas a {color:#fff;}
@font-face {font-family: 'museo500';src: url('/fonts/museosans_500.woff2') format('woff2'),url('/fonts/museosans_500.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}

@media screen and (max-width:1150px)
  {
  #superhead span {display:none;}
  #main {margin-top:-170px;}
  }
@media screen and (max-width:640px)
  {
  #superhead img {display:none;}
  #vacancesactives {transform:scale(0.5);}
  #ss2022 {transform:scale(0.37);}
  #garcon, #fille {display:none;}
  .content {margin:0 10px;}
  #recherche .select, #recherchel .select {width:100%; margin:0 0 4px 0;}
  .case {width:calc(100% - 42px);}
  .casel h6 {position:relative; width:calc(100% - 20px); margin-top:10px; bottom:auto;}
  .scasel, .scasel2 {width:calc(100% - 40px);}
  .scasel {padding:0 10px;}
  .scasel2 {border-radius:0; margin:0; padding:20px;}
  }