#sp-accueil {
	padding: 0
}
#sp-accueil h1 {
	margin: -7px 0 9px 0;
	padding: 0 0 16px 0;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	width: fit-content;
	position: relative;
	user-select: none;
	pointer-events: none
}
.inactif {
    display: none;
}
#sp-accueil h1 img {
	width: 388px;
	display: inline-block;
	transform: rotate(-4deg) translateX(-6px);
	margin: -12px 0 0 0
}
#sp-accueil > .centrage {
	margin-top: 36px;
	overflow: hidden;
	position: relative;
	z-index: 1
}
#hero-accueil {
	height: 622px;
	width: 100%;
	position: absolute;
	z-index: 0;
	top: 0
}
#hero-accueil:before,#hero-accueil:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(180deg, rgb(0 46 104), rgba(0, 82, 205, 0.04));
	z-index: 1;
	pointer-events: none;
	background-size: 100% auto
}
#hero-accueil:after {
	background: url(../../../tpl/imgs/vague.svg) center bottom no-repeat;
	background-size: 102% auto
}
#hero-accueil .img-hero {
	height: 100%
}
#hero-accueil .img-hero picture {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	height: 100%
}
#sp-accueil .hide {
	display: none
}
#sp-accueil span.strasbourg {
	display: block;
	position: absolute;
	right: 0;
	bottom: 0px
}
#sp-accueil .rangee {
	margin: 0
}
#gauche {
	padding: 0;
	position: relative;
	z-index: 1;
	background: #fff
}
#slideshow-accueil {
	padding: 28% 0
}
#gauche .inner {
	margin: auto;
	padding: 30px 40px 57px 40px;
	max-width: 912px
}
#texte-principal {
	font-size: 17px;
	font-weight: 300;
	text-align: justify
}
.anciens {
    overflow: hidden;
    background: #ebf0f7;
    padding: 15px;
}
.anciens > a {
    display: block;
    width: fit-content;
    padding: 15px;
    clear: both;
}
.anciens .item {
    float: left;
    width: 32.333333%;
    margin: 0.5%;
    height: 410px;
    opacity: 0.8;
}
.anciens .item:hover {
    opacity: 1;
}
#suite-onglets {
    width: fit-content;
    margin: auto;
    padding: 0 0 41px 0;
}
#suite-onglets a:hover {
    text-decoration: underline;
}
#suite-onglets ul li {
	display: inline-block;
    vertical-align: top;
    width: 30%;
    margin: 0.45em;
	padding: 0 0 0 14px;position: relative;
	user-select: none
}
#suite-onglets ul li:before {
	content: '';
	position: absolute;display: block;
	top: 7px;left: 0;vertical-align: middle;
	width: 5px;
	height: 5px;
	margin: 0 7px 1px 0;
	background: var(--main)
}
#suite-onglets ul li a {
	vertical-align: middle;
	display: inline-block
}
#suite-onglets ul li a:hover {
	text-decoration: underline
}
#suite-onglets h2 {
	color: var(--main);
	margin: 1em 0 1em 0;}
#droite {
	background: #ebf0f7;
	padding: 0px 40px 40px 40px;
	border-top-right-radius: 35px;
	position: relative;
	z-index: 10
}
#droite h2.titre {
	color: var(--textes);
	padding: 0 0 0 21px;
	margin: 19px 0 10px 0;
	font-size: 13px;
	font-weight: 400;
	line-height: 26px;
	background: url(../../../tpl/imgs/icones/infos.svg) left 4px no-repeat;
	background-size: auto 16px;
	user-select: none
}
#droite-inner {
	padding: 0 0 0 0
}
#infos-utiles {
	font-size: 13px;
	background: #ffffff;
	padding: 10px 20px 15px 20px;
	border-radius: 7px;
	margin: auto
}
#infos-utiles h2 {
	font-size: 120%;
	color: var(--textes)
}
#infos-utiles h3 {
	font-size: 110%
}
#infos-utiles h4 {
	font-size: 105%
}
#infos-utiles h5 {
	font-size: 95%
}
#infos-utiles p {
	line-height: 1.35em
}
#infos-utiles ul > li:before {
	top: 0.88em
}
#agenda {
	margin: 0 0 0 0;
	padding: 0;
	font-size: 0.99rem
}
#liste-vendenheim a {
	color: var(--second)
}
#droite #agenda .titre {
	background: url(../../../tpl/imgs/icones/agenda.svg) left 4px no-repeat;
	background-size: auto 16px;
	margin: 21px 0 13px 0
}
#choix-ecole {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgba(162, 185, 210, 0.27)
}
#cont {
	position: relative;
	margin: auto
}
#cible-strasbourg,#cible-vendenheim {
	padding: 15px 25px 15px 15px;
	font-family: 'Poppins', sans-serif;
	color: #2560d4;
	font-size: 15px;
	width: 50%;
	text-align: center;
	font-weight: 600;
	cursor: default
}
#cible-vendenheim {
	color: var(--second)
}
#droite .inactif {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	display: none
}
#agenda .item {
	position: relative
}
#droite .item.inactif {
	display: block;
	opacity: 1;
	pointer-events: all
}
#calendriers {
	width: auto;
	position: relative;
	min-height: 339px
}
#cible-strasbourg, #cible-vendenheim {
	font-size: 15px
}
.calendrier .navigation {
	padding: 9px 0 10px
}
.calendrier .prev:before, .calendrier .next:before {
	width: 9px;
	height: 9px
}
.calendrier .title {
	font-size: 15px
}
.calendrier th {
	padding: 13px 0 9px 0;
	font-size: 12px
}
.calendrier td {
	padding: 9px 0;
	font-size: 12px
}
.calendrier td.bleu {
	color: #fff
}
.calendrier td.bleu:before,.calendrier#calendrier-vendenheim td.bleu:before {
	width: 28px;
	height: 28px
}
.calendrier#calendrier-strasbourg td.bleu:hover:before {}
.calendrier.admin td div.cont-evts {
	top: 35px
}
.calendrier td div.cont-evts > a {
	font-size: 12px
}
.calendrier td.bleu div.cont-evts .evt h4 a {
	font-size: 12px;
	line-height: 120%;
	padding-left: 9px;
	background: none;
}

.calendrier td.bleu div.cont-evts .evt:first-child h4 a {
    background: none;padding-top: 18px;
}

.calendrier td.bleu div.cont-evts .evt:last-child h4 a {
    padding-bottom: 18px;
}
.calendrier td.bleu div.cont-evts .evt:first-child h4 a {
	padding-top: 16px;
	background-size: 14px auto;
	background-position: 11px 15px
}
#droite ul li .block .content .calendrier {
	margin: 10px 0 0px 0;
	line-height: normal;
	font-size: 15px;
	font-weight: 600;
	color: var(--third)
}
#evtsVendenheim h2 {
	color: var(--second)
}

@media (max-width: 1500px) {
	#sp-accueil h1 {
	    font-size: 15px
	}
	#sp-accueil h1 img {
        width: 306px;
        margin: -3px 0 -6px 0
	}
	#gauche .inner {
	    padding: 30px 50px 57px 50px
	}
	#texte-principal {
	    font-size: 16px
	}
	#droite {
	    padding: 0px 15px 40px 15px
	}
	#infos-utiles {
	    padding: 10px 15px 15px 15px
	}
	#cible-strasbourg,#cible-vendenheim {
        font-size: 13px;
        padding: 10px 5px 10px 5px
	}
    .anciens .item {
        width: 49%;
    }
}

@media (max-width: 1200px) {
	#droite h2.titre a {
        display: inline-block;
        line-height: 18px
	}
}

@media (max-width: 992px) {
	#hero-accueil {
	    height: 352px
	}
	#cible-strasbourg,#cible-vendenheim {
	    font-size: 12px
	}
    #gauche .inner {
        padding: 30px 30px 57px 30px;
    }
    .anciens .item {
        max-width: 288px;
        width: 49%;
        height: 455px;
    }
    #droite {
        padding: 0px 10px 40px 10px;
    }
}

@media (max-width: 768px) {
	#sp-accueil h1 {
	    padding: 0 0 16px 15px
	}
	body.masque #sp-accueil h1 {
	    opacity: 0
	}
	#bouton-infos {
        position: absolute;
        top: 0;
        right: 15px;
        background-color: #005fff;
        background-image: url(../imgs/bouton-infos.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0 0;
        width: 60px;
        height: 60px;
        z-index: 10;
        border-radius: 60px;
        border: 1px solid #fff
	}
	#bouton-infos.off {
	    background-position: 0 100%
	}
	#droite.montre {
	    display: block
	}
	body.masque:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgb(0 0 0 / 76%);
        z-index: 1;
        width: 100%
	}
	body.masque #gauche {
	    opacity: 0
	}
	#droite {
        width: auto;
        position: relative;
        margin: 0 15px;
        top: -52px;
        z-index: 1;
        background: #ffffff;
        float: none;
        display: none;
        border-radius: 20px;
        padding: 12px 15px 40px 15px
	}
}

@media (max-width: 576px) {
	#sp-accueil h1 {
	    font-size: 13px
	}
	#sp-accueil h1 img {
        width: 191px;
        margin: -3px 0 -6px 0
	}
	#sp-accueil > .centrage {
        margin-top: 21px;
        padding-top: 5px
	}
	#bouton-infos {
        width: 45px;
        height: 45px;
        top: 5px;
        right: 20px
	}
	#slideshow-accueil .prev {
	    top: 40%
	}
	#slideshow-accueil .next {
	    top: 40%
	}
	#gauche .inner {
	    padding: 15px 20px 57px 20px
	}
    .anciens {}

    #suite-onglets ul li {
        width: 42%;margin: 3%;
    }
    .anciens .item {
        width: 100%;
        margin: 4% auto;
        float: none;
    height: auto;}
}