@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Raleway:wght@400;700&display=swap');
:root {
	--main: #0040c3;
	--main2: #002546;
	--main3: #5dc2ff;
	--second: #17918f;
	--second2: #00b8d6;
	--second3: #00b8d6;
	--third: #851ec5;
	--textes: #040a18;
	--liens: #0093ff
}
* {
	box-sizing: border-box
}

#cont-404 {max-width: 640px;margin: auto;padding: 200px 0 390px 0;}
strong,b {
    font-weight: 700;
}
body {
	font-family: 'Raleway',arial,sans-serif;
	font-weight: 300;
	color: #16232c;
	color: var(--textes)
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins',arial,sans-serif;
	color: var(--main)
}
sup {
	vertical-align: top
}
h1 {
	color: var(--main);
	font-size: 35px;
	margin: 0.4em 0 0em 0
}
.vendenheim h1 {
	color: var(--second)
}
a {
	color: #ff8100;
	color: var(--liens)
}
.vendenheim a {
	color: var(--second)
}
.couleur-vendenheim {
	color: var(--second)!important
}
#ariane {
	font-size: 13px;
	font-family: 'Poppins',sans-serif
}
#hero #ariane p {
	margin: 0 0 10px 0;
	display: inline-block;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	margin: 0
}
#ariane ul {
	display: inline-block
}
#ariane li {
	display: inline-block;
	color: #ffffff
}
#ariane a {
	color: #ffffff
}
#ariane a:after {
	content: "/";
	display: inline-block;
	margin: 0 1px 0 7px;
	text-decoration: none;
	color: #ffffff
}
.evenement {
	margin: 22px 0 22px 0px;
	background: #fff;
	border-radius: 15px;
	color: var(--main);
	padding: 0px 30px 30px 30px;
	color: var(--main)
}
.evenement:hover {
	box-shadow: 2px 3px 15px #0040c321
}
.evenement .block.vendenheim {
	color: var(--second)
}
.evenement .img-full {
	margin: 0 auto
}
.evenement .img-full picture {
	padding: 0;
	text-align: left
}
.evenement .img-full picture img {
	position: static;
	max-height: 164px;
	width: auto;
	object-position: left center
}
.evenement .img-full img {
	object-fit: contain
}
.evenement .dateEvenement {
	display: block;
	padding: 17px 0 15px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--textes);
	font-family: 'Poppins',sans-serif;
	margin: 0;
	line-height: 110%
}
.evenement h3 {
	clear: both;
	margin: 17px 0 12px 0;
	line-height: 110%;
	color: var(--textes);
	font-size: 14px;
	font-family: 'Poppins',sans-serif
}
.evenement .intro {
	margin: 0;
	font-size: 13px;
	color: var(--textes);
	line-height: 136%
}

.evenement .intro:after {}
.evenement .intro span {
	display: block;
	margin: 6px 0 0 0;
	color: var(--main);
	font-weight: 600
}
.vendenheim .evenement .intro span {
	color: var(--second)
}
#sp-etablissements .rubriques {
	margin: 54px 0;
	background: #e9f1ff;
	padding: 46px 30px 39px 30px;
	border-radius: 10px
}
#sp-etablissements .rubriques ul {
	padding: 0 0 0 37px
}
#sp-etablissements .rubriques h2 {
	margin: 0px 0 27px 0
}
#sp-etablissements .rubriques ul li a {
	display: inline-block;
	padding: 7px 0;
	margin: 5px 0
}
#sp-etablissements .rubriques ul li a:hover {
	text-decoration: underline
}
#calendriers {
	position: relative;min-height: 450px;
	background: url(../../../images/icones/loader.gif) center 90px no-repeat;
	z-index: 9999999999999999;
	width: 66%;
	z-index: 99999999;
	user-select: none;
	padding: 0
}
#choix-ecole {
	display: flex;
	align-items: center;
	border-bottom: 1px solid rgb(129 169 189 / 11%);
	font-family: 'Poppins', sans-serif;
	font-size: 12px
}
#cible-strasbourg, #cible-vendenheim {
	padding: 15px 25px 15px 15px;
	color: #019dfd;
	width: 50%;
	text-align: center;
	border-top: 1px solid #c7eef5;
	border-bottom: 0;
	font-weight: bold;
	background: #fff
}
#cible-strasbourg {
	border-right: 0;
	border-top-left-radius: 12px
}
#cible-vendenheim {
	border-left: 0;
	border-top-right-radius: 12px;
	color: #00B8D6
}
#cible-strasbourg:hover, #cible-vendenheim:hover {
	background: rgb(48 144 253);
	color: #fff;
	cursor: pointer
}
#cible-vendenheim:hover {
	background: var(--second)
}
#cible-strasbourg.on, #cible-vendenheim.on {
	font-weight: 600;
	background: linear-gradient(135deg, rgb(189 197 255) 0%,rgb(90 166 253) 47%,rgb(48 144 253) 100%);
	color: #fff
}
#cible-vendenheim.on {
	background: linear-gradient(135deg, rgb(0 184 214) 0%,rgb(0 184 214) 47%,rgb(111 179 177) 100%);
	border-top-left-radius: 0
}
#calendrier-strasbourg.inactif, #calendrier-vendenheim.inactif {
	display: none
}
#calendrier-strasbourg,#calendrier-vendenheim {
	background: #fff
}
.calendrier.admin td.deploi:before,.calendrier td.bleu.deploi.passe:before,.calendrier td.bleu.deploi.passe:hover:before {
	content: ''!important;
	display: block!important;
	position: fixed!important;
	top: -800px!important;
	pointer-events: all!important;
	background: rgba(0, 0, 0, 0.63)!important;
	bottom: -800px!important;
	width: 100%!important;
	z-index: 6!important;
	left: 0!important;
	height: auto!important;
	right: auto!important
}
.calendrier .navigation {
	display: flex;
	align-items: center;
	padding: 4px 0 5px;
	border-bottom: 1px solid #ecf0f5
}
.calendrier .prev, .calendrier .next {
	position: relative;
	padding: 4.2%;
	background-size: 100% auto;
	border-radius: 35px;
	cursor: pointer;
	margin: 0 16px;
	width: 0;
	height: 0
}
.calendrier .prev:before,.calendrier .next:before {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 16px;
	height: 16px;
	margin: auto;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	transform: rotate(-135deg)
}
.calendrier .next:before {
	transform: rotate(45deg)
}
.calendrier .next {
	background-size: 100% auto
}
.calendrier#calendrier-vendenheim .next {
	background: url(../../../images/icones/cal-next-v.svg) center center no-repeat;
	background-size: 100% auto
}
.calendrier#calendrier-vendenheim .prev {
	background: url(../../../images/icones/cal-prev-v.svg) center center no-repeat;
	background-size: 100% auto
}
.calendrier .next.off {
	pointer-events: none;
	opacity: 0.2
}
.calendrier .title {
	text-align: center;
	width: 94%;
	vertical-align: middle;
	font-size: 17px;
	font-weight: 600;
	color: #3995fd
}
.calendrier#calendrier-vendenheim .title {
	color: #17918f
}
.calendrier table {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	border-collapse: collapse;
	position: relative;
	z-index: 0;
	border-top: 0;
	font-family: 'Poppins'
}
.calendrier td, .calendrier th {
	width: 14.2%
}
.calendrier th {
	font-weight: 400;
	border: 0;
	padding: 13px 0 29px 0;
	font-size: 15px;
	color: #000000
}
.calendrier th:first-child {
	border-left: 0px solid #f3f3f3;
	background: #c9d3e1
}
.calendrier th:last-child {
	border-right: 0px solid #f3f3f3
}
.calendrier td {
	padding: 16px 0;
	border: 0px solid #f3f3f3;
	font-size: 14px;
	color: #ffffff;
	position: relative;
	z-index: 10;
	font-weight: 400;
	line-height: 18px
}
td.n0 {
	background: #c9d3e1;
	color: #c9d3e1;
	border-bottom: 3px solid #c9d3e1
}
.calendrier td.today {
	
	
	}
.calendrier td.today.n0 {
	background: #c9d3e1;
	border-radius: 0;
	color: #000;
	font-weight: 600
}
.calendrier td.current {
	color: #868686
}
.calendrier td.deploi {
	background: #000778;
	color: #fff;
	font-weight: bold;
	z-index: 23
}
.calendrier#calendrier-vendenheim td.deploi {
	background: #268d17
}
.calendrier td.bleu {
	cursor: default;
	position: relative;
	font-weight: 800;
	color: #fff
}
.calendrier td.bleu.passe {
	color: #777
}
.calendrier td.bleu.passe:before, .calendrier td.bleu.passe:hover:before {
	background: #e9e9e9;}
.calendrier td.bleu.passe.deploi {
	color: #fff
}
.calendrier td.bleu:hover {
	position: relative
}
.calendrier td.bleu:before,.calendrier#calendrier-vendenheim td.bleu:before {
	content: '';
	display: block;
	position: absolute;
	background: linear-gradient(135deg, rgb(189 197 255) 0%,rgb(90 166 253) 47%,rgb(48 144 253) 100%);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 42px;
	height: 42px;
	margin: auto;
	border-radius: 30px
}

.calendrier td.today:before {outline: 2px solid #e382ff;}
.calendrier#calendrier-strasbourg td.bleu:hover:before {
	content: '';
	display: block;
	position: absolute;
	background: #2c8aff;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: auto
}
.calendrier td.bleu.passe:hover {
	color: #fff
}
.calendrier#calendrier-vendenheim td.bleu:before {
	background: linear-gradient(135deg, rgb(0 184 214) 0%,rgb(0 184 214) 47%,rgb(111 179 171) 100%)
}

.calendrier#calendrier-vendenheim td.bleu.passe:before {background: #ccc;}
.calendrier#calendrier-vendenheim td.bleu:hover:before {
	background: var(--second)
}
.calendrier td div.cont-evts {
	position: absolute;
	width: 450%;
	background: #fff;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.17);
	top: 20px;
	display: none;
	text-align: left;
	max-width: 350px;
	padding: 0 0 0px 0;
	border-radius: 5px;
	overflow: hidden
}
.calendrier.admin td div.cont-evts {
	top: 48px
}
.calendrier td.n0 div.cont-evts {
	left: 0
}
.calendrier td.n1 div.cont-evts {
	left: 0%
}
.calendrier td.n2 div.cont-evts {
	left: 0%
}
.calendrier td.n3 div.cont-evts {
	left: 0%
}
.calendrier td.n4 div.cont-evts {
	left: auto;
	text-align: right;
	right: 0
}
.calendrier td.n5 div.cont-evts {
	left: auto;
	text-align: right;
	right: -71%
}
.calendrier td.n6 div.cont-evts {
	left: auto;
	text-align: right;
	right: 0
}
.calendrier td.deploi div.cont-evts {
	display: block;
	z-index: 150;
	padding: 0;
	background: #ffffff
}
.calendrier td.bleu.front:hover div.cont-evts {
	display: block;
	z-index: -3;
	background: #ffffff
}
#calendrier-vendenheim.calendrier td.bleu.front:hover div.cont-evts {
	background: #ffffff
}
.calendrier td.bleu.front:hover {
	z-index: 99
}
.calendrier td div.cont-evts > a {
	color: #ffffff;
	text-decoration: none;
	font-weight: 400;
	display: block;
	background: #0059b5;
	padding: 11px 15px 10px 29px;
	font-size: 16px;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	z-index: 9999999999999999999
}
.calendrier#calendrier-vendenheim td div.cont-evts > a {
	background: #22b7b0
}
.calendrier td div.cont-evts h4 a:hover {
	text-decoration: underline
}
.calendrier td div.cont-evts > a:hover {
	background: linear-gradient(45deg, #469ace, #000778)
}
.calendrier#calendrier-vendenheim td div.cont-evts > a:hover {
	background: linear-gradient(45deg, #5bcbb6, #008896)
}
.calendrier td.bleu div.cont-evts .evt h4 {
	font-size: 17px;
	margin: 0;
	font-weight: 400
}
.calendrier td.bleu div.cont-evts .evt h4 a {
	color: #2c8aff;
	text-decoration: none;
	display: block;
	padding: 11px 9px 5px 36px;
	text-align: left;
	vertical-align: middle;
	background: url(../../tpl/imgs/icones/mini-event.svg) 15px 13px no-repeat;
	background-size: 14px auto;
	line-height: 20px;
	border: 1px solid #2c8aff2e;
	/* font-weight: 600; */
	font-size: 12px;}
.calendrier#calendrier-vendenheim td.bleu div.cont-evts .evt h4 a {
	color: #00b1b1
}
.calendrier td.bleu div.cont-evts .evt:first-child h4 a {
	padding-top: 29px;
	background: url(../../tpl/imgs/icones/mini-event.svg) 15px 30px no-repeat;
	background-size: 14px auto
}
.calendrier td.bleu div.cont-evts .evt h4 a:hover {
	text-decoration: underline
}
.texte-riche {
	line-height: 1.8em
}
.texte-riche h2 {
	color: var(--main);
	font-size: 26px
}
.texte-riche h3 {
	color: var(--main);
	line-height: 120%
}
.texte-riche h4 {
	color: var(--third);
	margin: 1em 0 0.5em;
	line-height: 120%
}
.texte-riche h5 {
	color: var(--third)
}
.texte-riche p {
	line-height: 1.5em
}

.texte-riche ul {
	margin: 3% 0 3%
}
.texte-riche ul > li {
	position: relative;
	margin: 0.75em 0;
	padding: 0 0 0 1em;
	line-height: 1.5em
}
.texte-riche ul > li:before {
	content: '';
	display: block;
	position: absolute;
	top: 0.8em;
	left: 0;
	padding: 0.15em;
	border-top: 0.15em solid var(--main);
	border-right: 0.15em solid var(--main);
	transform-origin: 50%;
	transform: translate(0,-0.3em) rotate(45deg)
}
.texte-riche a {
	color: #ff4700
}
#hero {
	position: absolute;
	height: 264px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-image: url(../imgs/bg-entete.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed
;color: #fff;}

#hero a {color: #fff;}
#hero:before,#hero:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: -2px;
	left: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(0 46 104), rgba(0, 82, 205, 0.04));
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover
}
.vendenheim #hero:before {
	background: linear-gradient(180deg, rgb(0 94 104), rgba(0, 82, 205, 0.04))
}
#hero:after {
	background: url(../imgs/vague.svg) center bottom no-repeat;
	background-size: 102% auto
}
#hero > .centrage {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 0;
	left: 0;
	transform: translateY(-50%)
}
#hero p, #hero h1 {
	margin: 0;
	color: #fff;
	font-size: 38px;
	font-style: italic;
	font-weight: 600
}
#hd {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	left: 0;
	background: #fff;
	box-shadow: 0 0 15px #2f43a366
}
#hd .centrage {
	position: relative;
	height: 90px;
	transition: all 0.25s linear
}
.scl #hd .centrage {
	height: 75px
}
.preload #hd {
	opacity: 0
}
#lg {
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 100%
}
#lg:before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(45deg, #b3cdf8, transparent);
	left: -200%;
	z-index: 50;
	pointer-events: none
}
#lg img {
	display: block;
	position: absolute;
	top: 9px;
	z-index: 10;
	width: 202px;
	height: auto;
	transition: all 0.25s linear
}
.scl #lg img {
	top: 6px;
	width: 180px
}
#mei {
	display: none;
	position: absolute;
	z-index: 99;
	top: 50%;
	right: 0;
	width: 70px;
	height: 54px;
	transform: translateY(-50%)
}
#ctm {
	display: block;
	position: relative;
	height: 100%;
	padding: 0 0 0 250px
}
#menus {
	position: relative;
	height: 56px;
	background: #071033;
	font-size: 0;
	z-index: 1
}
#menus > .centrage {
	height: 100%;
	max-width: 1600px
}
.scl #menus > .centrage {
	padding-left: 194px;
	text-align: left
}
.sclAnim #menus {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-100%);
	transition: none
}
.scl #menus {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	right: 0;
	background: #070729;
	transition: all 0.2s ease-out;
	transform: translateY(0)
}
#ctm.load {
	pointer-events: none;
	opacity: 0
}
#ctm a {
	text-decoration: none
}
#mpl {
	font-size: 13px;
	height: 100%;
	text-transform: uppercase
}
#mpl .masque {
	opacity: 1;
	background: #ffd3d3!important
}
#mpl a {
	color: #000000
}
#mpl > ul {
	display: flex;
	height: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 100%
}
#mpl > ul > li {
	position: relative;
	height: 100%;
	max-width: 163px;
	flex: 1 1 auto
}
#mpl > ul > li.actif {
	background: #d1edff
}
.resp #mpl > ul > li.actif {
	background: none
}
#mpl > ul > li.parent {
	padding-left: 30px
}
#mpl > ul > li:hover {
	background: #c1e7ff
}
#mpl > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 15px
}
#mpl > ul > li.parent > a {
	padding: 0 15px 0 0px;
	text-align: left;
	justify-content: left
}
#mpl > ul > li > a:hover {
	color: #2f2f2f
}
#mpl > ul > li > a .menu-titre {
	letter-spacing: 0;
	display: block;
	padding: 0;
	border-bottom: 1px solid #fff0;
	transition: all 0.5s ease-out;
	color: var(--textes);
	font-weight: 600
}
#mpl > ul > li:hover > a .menu-titre {
	color: var(--main)
}
#mpl > ul > li.actif > a .menu-titre {
	color: var(--main);
	border-radius: 4px
}
#mpl > ul > li.actif > a:hover .menu-titre {
	border-color: #61a8af00
}
#mpl > ul > li > ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 15px 0;
	background: #ffffff;
	width: 250px;
	box-shadow: 2px 13px 15px #0832683d;
	width: 350px
}
#mpl > ul > li#menu-58 > ul {
	left: auto;
	right: 0
}
#mpl > ul > li:hover > ul {
	display: block
}
#mpl > ul > li > ul > li {
	position: relative;
	height: auto;
	line-height: 22px;
	bottom: -100%;
	padding: 0 0 0 38px
}
#mpl > ul > li > ul > li > .dropper {
	top: 8px
}
#mpl > ul > li > ul > li.actif {
	background: #d1edff
}
#mpl > ul > li > ul > li.actif > a > .menu-titre {
	color: var(--main)
}
.resp #mpl > ul > li > ul > li.actif > a > .menu-titre {
	color: #4c9cd0
}
#mpl > ul > li > ul > li:hover {
	background: #c1e7ff
}
#mpl > ul > li > ul > li > a {
	display: block;
	padding: 12px 0 12px 0
}
#mpl > ul > li > ul > li > ul {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 200px;
	background: #ffffff;
	box-shadow: 2px 13px 15px #0832683d
}
#mpl > ul > li > ul > li:hover > ul {
	display: block
}
#mpl > ul > li > ul > li > ul > li {
	position: relative;
	height: auto;
	line-height: 22px;
	bottom: -100%;
	padding: 0
}
#mpl > ul > li > ul > li > ul > li:hover {
	background: #c1e7ff
}
#mpl > ul > li > ul > li > ul > li > a {
	display: block;
	padding: 16px 24px;
	line-height: 125%;
	text-transform: none
}
#hd .dropper {
	position: absolute;
	top: 30px;
	left: 0;
	width: 30px;
	height: 30px;
	transition: all 0.25s linear
}
.resp #hd .dropper {
	top: 7px
}
.scl #hd .dropper {
	top: 23px;
	transition: all 0.25s linear
}

.scl #hd ul ul .dropper {top: 8px;}
.resp #hd .dropper, .scl.resp #hd .dropper {
	display: inline-block;
	top: 7px
}
.resp footer .dropper {
	display: none
}
#hd .dropper:after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	bottom: auto;
	left: 0;
	width: 6px;
	height: 6px;
	margin: auto;
	border-top: 2px solid #489bcd;
	border-right: 2px solid #4c9cd0;
	transform-origin: 50%;
	transform: translateY(-90%)rotate(135deg);
	transition: all 0.2s ease-out
}
#hd .deploi > .dropper:after {
	transform: translateY(-20%)rotate(315deg)
}
.resp #ctm {
	display: none;
	position: fixed;
	height: auto;
	top: 90px;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background: #1b2231;
	transform: none;
	height: calc(100vh - 90px)
}
.scl.resp #ctm {
	top: 75px;
	height: calc(100vh - 75px)
}
.resp #mei {
	display: inline-block
}
.resp #mpl {
	margin: auto
}
#ctm.resp.display {
	display: block;
	overflow-y: scroll
}
.resp #mpl > ul {
	display: block;
	padding: 60px 30px 30px 30px;
	height: auto
}
.resp #mpl > ul > li {
	height: auto;
	margin: 15px 0;
	width: 100%;
	max-width: 100%
}
.resp #mpl > ul > li.parent {
}
.resp #mpl > ul > li:hover {
	background: none
}
.resp #mpl > ul > li > a {
	display: inline-block;
	line-height: 18px;
	padding: 13px 10px 14px 9px
}
.resp #mpl > ul > li.parent > a {
}
.resp #mpl > ul > li:hover > a {
	background: none
}
.resp #mpl > ul > li > a .menu-titre {
	color: #fff
}
.resp #mpl > ul > li.actif > a .menu-titre {
	color: #4c9cd0
}
.resp #mpl > ul > li > ul {
	position: static;
	display: block;
	padding: 1px 30px 1px 30px;
	height: auto;
	width: 100%;
	overflow: hidden;
	background: none;
	box-shadow: 0 0 0 #000
}
.resp #mpl > ul > li.parent > ul {
}
.resp #mpl > ul > li > ul > li {
	bottom: auto;
	margin: 4px 0
}
.resp #mpl > ul > li > ul > li.actif {
	background: none
}
.resp #mpl > ul > li > ul > li.parent {
	padding: 0 0 0 30px
}
.resp #mpl > ul > li > ul > li:hover {
	background: none
}
.resp #mpl > ul > li > ul > li > a {
	padding: 13px 10px 14px 0px;
	line-height: 18px;
	font-size: 14px;
	color: #fff
}
.resp #mpl > ul > li > ul > li > #hd .dropper {
	width: 30px;
	height: 30px
}
.resp #mpl > ul > li > ul > li > ul {
	display: block;
	position: static;
	padding: 0 0 18px 0;
	background: none;
	overflow: hidden;
	box-shadow: 0 0 0 #000
}
.resp #mpl > ul > li > ul > li > ul > li {
	bottom: auto
}
.resp #mpl > ul > li > ul > li > ul > li > a {
	color: #fff
}
#ft {
	color: #fff;
	background: var(--main2)
}
#ft .rangee {
	padding: 20px 0 20px 0;
	max-width: 597px;
	margin: auto
}
#ft h4 {
	margin: 0 0 13px 0;
	color: var(--main3)
}
#ft a {
	color: #fff;
	text-decoration: underline
}
#ftm {
	padding: 30px 0 30px 0;
	margin: 0 0 14px 0;
	text-align: center;
	border-bottom: 1px solid rgb(255 255 255 / 19%)
}
#ftm ul li {
	display: inline-block;
	margin: 5px 10px;
	font-size: 12px;
	vertical-align: top
}
#ftm ul li a {
	text-decoration: none
}
#ftm ul li a:hover {
	text-decoration: underline
}
#ft .col .inner p {
	font-size: 12px;
	text-align: left;
	line-height: 1.5em;
	font-family: 'Poppins'
}
#copy {
	padding: 12px 0;
	font-size: 11px;
	text-align: center;
	border-top: 1px solid #ffffff0d
}
@media (max-width: 1500px) {
	body {
		font-size: 15px
	}
	h1 {
		font-size: 28px
	}
	#sp-etablissements .rubriques h2 {
		margin: 0px 0 13px 0
	}
	#sp-etablissements .rubriques ul li a {
		padding: 5px 0;
		margin: 3px 0
	}
	.calendrier .prev:before,.calendrier .next:before {
		width: 12px;
		height: 12px
	}
	.calendrier td, .calendrier th {
		padding: 13px 0 13px 0
	}
	#hero {
		height: 209px
	}
	#hero p, #hero h1 {
		font-size: 32px
	}
	#mpl {
		font-size: 12.5px
	}
	#mpl > ul > li.parent {
		padding-left: 30px
	}
	.resp #mpl > ul > li > a {
	}
	.resp #mpl > ul > li > ul {
		padding: 0 0 10px 0
	}
	.resp #mpl > ul > li > ul > li > a {
		display: inline-block
	}
}
@media (max-width: 1200px) {
	#hero {
		height: 170px
	}
	#hero > .centrage {
	}
	.resp #mpl > ul > li > ul {
		overflow: hidden
	}
	.resp #mpl > ul > li > ul > li > ul {
	}
	#ftm ul li {
		margin: 12px
	}
}
@media (max-width: 992px) {
	h1, h2, h3, h4, h5, h6 {
	}
	.evenement {
		padding: 0px 20px 30px 20px
	}
	.evenement .dateEvenement {
		font-size: 12px
	}
	.calendrier .title {
		font-size: 13px!important
	}
	.calendrier td {
	}
	.calendrier td.bleu:before,.calendrier#calendrier-vendenheim td.bleu:before {
		width: 32px;
		height: 32px
	}
}
@media (max-width: 768px) {
	h1 {
		font-size: 24px
	}
	.resp #mpl > ul {
		max-width: 576px;
		margin: auto
	}
}
@media (max-width: 576px) {
	h1, h2, h3, h4, h5, h6 {
	}
	.evenement .block {
		height: auto
	}
	.evenement .img-full picture {
		max-height: none;
		height: auto
	}
	.evenement .img-full picture img {
		max-height: none;
		height: auto
	}
	.evenement .dateEvenement {
	}
	#hero {
		height: 126px
	}
	#hero > .centrage {
		transform: translateY(-50%);
		padding: 0 20px
	}
	#hero p, #hero h1 {
		font-size: 22px
	}
	#hd a {
		left: 15px
	}
	.resp #mei {
		right: 15px
	}
	#ft {
		padding: 0 20px 50px 20px
	}
}