/* TEMPORAIRE */
body div {
	color: black
	}

body {
	font-family: 'Libre Baskerville', serif;
	}

h1, h2, h3, input, label {
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	line-height: 1.2em;
	}

h4, h5, h6 {
	font-family: 'Libre Baskerville', serif;
	}


input, label, button {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	line-height: 1.2em;
	font-size:   16px;
	}

#main h3 {
	font-size:   200%;
	margin:      1em 0 .5em;
	line-height: 1.3em;
	font-family: 'Libre Baskerville', serif;
	font-weight: 900;
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	body, html {
		max-width:  100vw;
		overflow-x: hidden;
		}
		
	}


/* GENERAL
************************************************************************************************************************/
body, html {
	min-height: 100%;
	position:   relative;
	}

/* EN-TETE
************************************************************************************************************************/
#header {
	height:          120px;
	display:         flex;
	justify-content: space-between;
	box-shadow:      0 5px 10px rgba(0, 0, 0, .2);
	background:      white;
	backdrop-filter: blur(20px);
	}

#header .logo {
	display: flex;
	}


#header #logo {
	display: block;
	width:   100px;
	height:  100px;
	margin:  10px;
	}

#header #titre {
	background:          url(/img/titre.svg) no-repeat;
	background-size:     contain;
	background-position: left center;
	width:               120px;
	height:              35%;
	align-self:          center;
	z-index:             10;
	}

#header nav {
	width: 60vw;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#header {
		height: 80px;
		}
	
	#header #logo {
		width:  60px;
		height: 60px;
		}
	
	
	#header #logo {
		top:     20px;
		left:    10px;
		z-index: 10001;
		}
	}


/* NAVIGATION
************************************************************************************************************************/

nav {
	font-family:     "inter";
	
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

nav > div {
	display:        flex;
	flex-direction: column;
	}

nav > div > div {
	display: flex;
	
	}

nav a {
	color:   black;
	flex:    0 1 16%;
	padding: .25em 0
	}

nav a:hover {
	color:           black;
	text-decoration: none;
	}

nav a.active {
	font-weight: 900;
	}

nav form {
	flex:    0 0 16%;
	padding: .25em 0;
	display: flex;
	}

nav input[type='search'] {
	font-family: "inter";
	font-size:   100%;
	border:      1px solid transparent;
	width:       7em;
	transition:  .5s ease-in-out border;
	}

.frmChercher button {
	background: 0;
	border:     0
	}

.frmChercher .button {
	transition: .5s ease-in-out opacity;
	width:      1.5em;
	max-height: 1.5em;
	display:    block;
	margin:     0;
	padding:    0;
	}

nav .frmChercher .button {
	opacity: 0;
	}

.frmChercher .button .icon {
	width:  1.5em;
	height: 1.5em;
	}


nav form:hover input[type='search'] {
	border: 1px solid silver;
	}

nav form:hover .button {
	opacity: 1;
	}

nav input::placeholder {
	color: #333;
	}

#btn-mobile-menu {
	display: none;
	}

#btn-adhesion .content {

	transform: rotateZ(-10deg);
	}

#btn-adhesion .content  h4 {
	font-family: Inter, sans, serif;
	font-weight: 900;
	text-transform: uppercase;
	}

#btn-adhesion:hover {
	text-decoration: none;
	}

#btn-adhesion-wrapper {
	width: 15vw;
	height: 15vw;
}

#btn-top {
	width:      40px;
	height:     40px;
	position:   fixed;
	right:      10px;
	top:        calc(40vh - 20px);
	transition: .5s ease opacity;
	opacity:    0;
	z-index:    200;
	}

#btn-top.show {
	opacity: 1;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#a-propos #btn-adhesion,
	#cercles #btn-adhesion,
	#sections #btn-adhesion {
		display: none;
		}
	
	#contact #btn-adhesion {
		width: 30vw;
		height: 30vw;
		}

	#btn-adhesion-wrapper {
		width: 30vw;
		height: 30vw;
	}
	
	#btn-mobile-menu {
		position:  absolute;
		font-size: 4vw;
		margin:    0;
		width:     60px;
		height:    60px;
		top:       10px;
		right:     10px;
		z-index:   99900000;
		display:   block;
		/*background-color: #B4252D;*/
		}
	
	
	.nav-on {
		overflow: hidden;
		}
	
	.nav-on #splash {
		z-index: -1;
		}
	
	#header nav {
		position:        fixed;
		top:             0;
		left:            0;
		width:           100vw;
		height:          100vh;
		display:         none;
		flex-direction:  column;
		justify-content: flex-start;
		padding-top:     10vh;
		transition:      .5s ease all;
		}
	
	#header nav div {
		display: block;
		margin:  0;
		padding: 0;
		width:   100%;
		}
	
	#header nav a {
		font-size:  20px;
		text-align: center;
		padding:    .3em .6em;
		text-align: center;
		width:      100%;
		display:    block;
		color:      white;
		
		}
	
	nav form {
		text-align: center;
		}
	
	nav .frmChercher input {
		border:           0;
		background-color: rgba(255, 255, 255, .4);
		color:            white;
		padding:          .2em;
		}
	
	nav .frmChercher button {
		opacity:          1;
		width:            40px;
		height:           40px;
		background-image: url(../img/icones/icone-loupe.svg);
		background-size:  cover;
		}
	
	nav button {
		opacity: 1;
		}
	
	nav input[type='search'] {
		width:       50%;
		margin-left: 25%;
		}
	
	#header nav a.active {
		background:  transparent;
		font-weight: 900;
		}
	
	#accueil #header nav a {
		color: white;
		}
	
	.nav-on #header nav {
		display:                 flex;
		background-color:        rgba(180, 37, 45, 0.8);
		-webkit-backdrop-filter: blur(10px);
		z-index:                 10000;
		background-repeat:       no-repeat;
		background-position:     center center;
		background-size:         contain;
		}
		
	}

/* SOUS-NAVIGATION
************************************************************************************************************************/
#navbar {
	padding: 0 20px;
	}

#navbar ul {
	margin-top:  5em;
	list-style:  none;
	font-family: Inter;
	text-align:  center;
	font-size:   90%;
	}

#navbar ul li a {
	padding: 0em 1em 2em 0;
	color:   #333;
	display: block;
	}

#navbar ul li.active {
	font-weight: 900;
	}

#navbar ul li a:hover {
	text-decoration: none;
	}

#navbar #btn-open {
	display: none;
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#navbar {
		/*display:    flex;*/
		flex: 0 0 16%;
		background: #f0f0f0;
		}
	
	#navbar.minimize-mobile {
		margin:     0;
		background: transparent;
		}
	
	#navbar.minimize-mobile ul {
		position:   inherit;
		background: transparent;
		}
	
	#navbar > div {
		
		flex: 1 1 calc(100% - 50px);
		}
	
	#navbar ul {
		width:      97vw;
		margin:     0;
		padding:    .5em 0;
		position:   absolute;
		left:       2vw;
		z-index:    10;
		background: #f0f0f0;
		
		}
	
	#navbar ul li {
		display:         flex;
		flex-direction:  column;
		justify-content: center;
		}
	
	#navbar ul li a {
		padding:    .7em;
		color:      #333;
		transition: .5s all ease;
		display:    none;
		}
	
	#navbar ul li.active a {
		display: block;
		}
	
	#navbar.open ul li a {
		display: block;
		}
	
	#navbar.open ul {
		box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
		}
	
	#navbar #btn-open {
		flex:        0 0 40px;
		display:     block;
		width:       40px;
		height:      40px;
		/*margin: 0 .5em;*/
		z-index:     20;
		position:    absolute;
		right:       0;
		color:       #999;
		margin-top: 14px;
		font-family: Inter;
		font-weight: 900;
		font-size:   1em;
		}
	
	#navbar #btn-open:after {
		content: "\26DB";

		}
	
	#navbar.open #btn-open:after {
		content: "\25B3";
		}
		
	}

/* ACCUEIL
************************************************************************************************************************/
#slogan {
	margin:     1em auto 0em;
	font-size:  160%;
	text-align: center;
	width:      70vw;
	}

#slogan h2 {
	font-weight: normal;
	font-size:   2vw;
	}

#splash {
	width:      100%;
	min-height: 40vh;
	display:    block;
	margin:     1vh 0 0;
	/*z-index: -1;*/
	}

#splash .logo img {
	padding: 15%;
	width:   20vw;
	}

#cols {
	display:         flex;
	justify-content: center;
	align-content:   center;
	}

.col {
	align-self: center;
	padding:    2em;
	align-self: flex-start;
	}

.col .button {
	margin-top: 1em;
	float:      right
	}


#accueil .col h4.titre, #detail h4.titre {
	font-family:   Inter, sans-serif;
	font-weight:   700;
	color:         #999;
	margin:        0 0 1em 0;
	padding:       0 0 .5em 0;
	font-size:     120%;
	text-align:    center;
	border-bottom: 1px solid silver
	}

#detail h4.titre {
	margin-top: 2em;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#slogan h2 {
		font-size: 5vw;
		}
	
	#cols {
		display: block;
		}
	
	.col {
		padding: 2em 0;
		}
	
	.col .button-bar {
		margin-bottom: 15vh;
		}
		
	}

/* AGENDA
************************************************************************************************************************/
#agenda #content > h3 {
	font-family:    "Libre Baskerville", Serif;
	text-transform: capitalize;
	margin:         2em 0 .5em 0;
	}

#filter {
	width:            100%;
	background-color: #f0f0f0;
	padding:          .5em;
	border-radius:    5px;
	display:          flex;
	justify-content:  space-between;
	}

#filter select {
	/* styling */
	background-color:    white;
	border:              thin solid silver;
	border-radius:       4px;
	display:             inline-block;
	font:                inherit;
	line-height:         1.5em;
	padding:             0.5em 3.5em 0.5em 1em;
	
	/* reset */
	
	margin:              0;
	-webkit-box-sizing:  border-box;
	-moz-box-sizing:     border-box;
	box-sizing:          border-box;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	
	background-image:    linear-gradient(45deg, transparent 50%, gray 50%),
	                     linear-gradient(135deg, gray 50%, transparent 50%),
	                     linear-gradient(to right, #ccc, #ccc);
	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;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#agenda #filter {
		flex-direction: column;
		}
	
	#agenda #filter #frmFilterCategories, #agenda #filter #frmFilterEntites {
		display:        flex;
		flex-direction: column;
		}
	
	#agenda #filter label {
		margin-top: .5em;
		}
		
	}

/* CONTENU
************************************************************************************************************************/
#page {
	margin:          7vh 0 0 0;
	width:           100%;
	min-height:      70vh;
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	
	}

#navbar {
	flex: 0 0 16%;
	}

#toolbar {
	flex: 0 0 8%
	}

#content {
	flex:            0 0 74%;
	flex-wrap:       wrap;
	display:         flex;
	justify-content: space-between;
	}

#accueil #content {
	margin: 0 auto;
	flex:   0 0 90%;
	}


#content #title {
	flex:           0 0 62%;
	padding-bottom: 1em;
	flex-break:     after;
	}

#content #title h4 {
	font-size: 130%;
	}

#content #title h5 {
	font-size:  110%;
	font-style: italic;
	}

#content #main {
	flex:          0 1 68%;
	margin-bottom: 2em;
	padding-right: 2em;
	line-height:   1.8em;
	}

#content #main p {
	margin-bottom: .8em;
	}

#content #main img {
	max-width: 100%;
	}

#content #detail {
	font-family: Inter;
	font-size:   100%;
	flex:        0 0 30%;
	line-height: 1em;
	}

#content #detail p {
	margin-bottom: .2em;
	}

#content #detail .detail-item {
	border-top: 1px dotted silver;
	padding:    .5em 0;
	}

#content #detail .detail-item:first-child, #content #detail .detail-item:last-child {
	border: 0;
	}

#content #detail .detail-item:last-child {
	border-bottom: 1px dotted silver;
	}

#content #visuel {
	flex:           0 0 100%;
	padding-bottom: 1em;
	margin-bottom:  5vh;
	}

#content #visuel .credit {
	font-size:  80%;
	font-style: italic;
	text-align: left;
	}

#content #visuel img {
	max-width: 100%;
	}

#content #visuel .legende {
	font-size:  80%;
	font-style: italic;
	text-align: right;
	}

#item-sje {
	
	width:    20vw;
	height:   20vw;
	position: absolute;
	left:     calc(50% - 10vw);
	}

#item-sje .content {
	background:          url(../img/logo-accueil-blanc.svg);
	text-indent:         -9999px;
	background-repeat:   no-repeat;
	background-size:     60%;
	background-position: center;
	}

#item-editions, #item-diju, #item-sections, #item-boutique, #item-actes, #item-cercles {
	width:    15vw;
	height:   15vw;
	position: absolute;
	left:     calc(45% - 7.5vw);
	/*margin-left: -20%;*/
	}

#item-adhesion {
	position: absolute;
	left:75vw;
	margin-top: 10vh;
	}

#cercles .circle {
	width:    20vw;
	height:   20vw;
	position: absolute;
	left:     calc(50% - 10w);
	}

#cercles .circle h4 {
	font-size: .4vw;
	}

#cercles #circle-container {
	min-height: 50vh;
	}




/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 768px) {
	
	#page {
		flex-direction:  column;
		justify-content: flex-start;
		}
	
	#navbar {
		height: 2em;
		width:  100%;

		}
	
	#content {
		width:          92vw;
		margin:         2vh 4vw;
		flex-direction: column;
		}
	
	#content #main, #content #detail {
		width:         100%;
		margin-bottom: 5vh;
		}
	
	#item-sje {
		width:  30vw;
		height: 30vw;
		}
	
	#item-adhesion {
		position: absolute;
		left:75vw;
		margin-top: 20vh;
		}
	
	#item-adhesion, #item-editions, #item-diju, #item-sections, #item-boutique, #item-actes, #item-cercles, #cercles .circle {
		width:  20vw;
		height: 20vw;
		}
		
		
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 468px) {
	
	#cercles .circle {
		width:  30vw;
		height: 30vw;
		}
	
	#cercles .circle h4 {
		font-size: .8vw;
		}
	
	#cercles #circle-container {
		min-height: 35vh;
		}
		
	}

/* LISTES
************************************************************************************************************************/
.list-item {
	/*margin: 0 0 2em 0;*/
	padding:         1em 1em;
	border-bottom:   1px dotted silver;
	display:         flex;
	justify-content: space-between;
	flex-wrap:       nowrap;
	transition:      background-color .5s ease-in-out;
	min-width:       100%;
	width:           100%;
	color:           #888;
	margin-bottom:   1em;
	}

.list-item:hover {
	text-decoration: none;
	}

.list-item .date {
	flex:            0 0 10%;
	aspect-ratio:    1;
	margin-right:    1em;
	
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      center;
	height:          fit-content;
	}


.publication_date {
	font-size: 70%;
	font-style: italic;
	text-align: right;
	color:grey;
	padding-top:.5em;
	}

#accueil .list-item .date {
	flex: 0 0 20%
	}

.list-item > .photo {
	flex:            0 0 10%;
	margin-right:    1em;
	justify-content: center;
	align-self:      flex-start;
	}

#main .list-item h3 {
	font-size:   150%;
	margin:      .5em 0 1em;
	padding:     0;
	font-weight: 900;
	}

.list-item h4 {
	font-size:   120%;
	margin:      0;
	padding:     0;
	font-weight: normal;
	
	}

.list-item h3 {
	font-size: 120%;
	}

.list-item h4 {
	font-size: 100%;
	}

.list-item h5 {
	font-size:  90%;
	font-style: italic;
	}

.list-item .date h5, .list-item .date h6 {
	margin:         0;
	padding:        0;
	text-transform: uppercase;
	color:          white;
	font-family:    "Libre Baskerville", Serif;
	font-size:      1vw;
	
	}


.list-item .date h5 {
	
	font-weight: 900;
	}

.list-item .date .shape .content h6 {
	margin: 0;
	}


.list-item .texte {
	flex:           1 1 100%;
	display:        flex;
	flex-direction: column;
	/*justify-content: center;*/
	}

.list-item .infos {
	
	}

.list-item .biographie {
	
	}

.list-item .visuel {
	flex:       0 0 15%;
	overflow:   hidden;
	max-height: 30vh;
	margin:     10px;
	}

.list-item .break {
	flex-basis: 100%;
	}

.list-item .biographie {
	font-size: 90%;
	margin:    1em 0;
	}

.list-item.show_visuel_on_top {
	width: 100%;
	
	}

.list-item.show_visuel_on_top .visuel {
	height:     auto;
	max-height: unset;
	flex:       0;
	margin:     0 0 20px 0;
	overflow:   visible;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	.list-item .date h5, .list-item .date h6 {
		font-size:  65%;
		margin-top: 0em;
		}
	
	.list-item .date {
		flex: 0 0 16%;
		}
	
	#frmFilterYear {
		margin: 10px 0 0 0px;
		align-self: flex-end;
		}
	}

/* PAGINATION
************************************************************************************************************************/

#pagination {
	text-align:  center;
	margin-top:  1em;
	width:       100%;
	float:       left;
	font-family: Inter, sans-serif;
	}

#pagination li {
	
	width:       1.3em;
	color:       white;
	font-weight: 900;
	display:     inline;
	margin:      2px;
	color:       #333;
	}

#pagination li span, #pagination li a {
	/*padding:         2px 8px;*/
	font-weight:     100;
	font-size:       70%;
	/*border-radius:   4px;*/
	text-decoration: none;
	width:           3em;
	height:          3em;
	display:         inline-block;
	}

#pagination .shape .content h4 {
	font-size: 120%;
	}

#pagination a .shape .content h4 {
	font-weight: 500;
	color:       white;
	}

#pagination span .shape .content h4 {
	font-weight: 900;
	color:       white;
	}


/* ENTITES
************************************************************************************************************************/
#subnav {
	width:  100%;
	margin: 0 0 1em 0;
	}

#subnav ul {
	width:           100%;
	display:         flex;
	justify-content: flex-start;
	list-style:      none;
	border-bottom:   1px solid silver;
	}

#subnav li {
	margin:                  0;
	padding:                 0;
	top:                     1px;
	position:                relative;
	display:                 inline-block;
	border-bottom:           1px solid silver;
	border-top-left-radius:  4px;
	border-top-right-radius: 4px;
	
	}

#subnav li a {
	font-family: Inter, sans;
	padding:     .5em 1em .5em 1em;
	display:     block;
	min-width:   fit-content;
	color:       #666;
	}

#subnav li a:hover {
	text-decoration: none;
	color:           black;
	}

#subnav li.active {
	font-weight:   900;
	border-left:   1px solid silver;
	border-top:    1px solid silver;
	border-right:  1px solid silver;
	border-bottom: 1px solid white;
	}

#subnav li.active a {
	font-weight: 900;
	color:       black
	}


@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#subnav ul {
		border:        0;
		border-radius: 5px;
		
		}
	
	#subnav li {
		border:  0px;
		padding: 0;
		margin:  0;
		
		
		}
	
	#subnav li.active {
		border: 0;
		}
	
	#subnav li a {
		font-family: Inter, sans;
		padding:     0 1em 0 0;
		word-break:  keep-all;
		display:     inline-block;
		width:       max-content;
		}
	
	.nav.scroll {
		overflow-x:                 scroll;
		overflow-style:             marquee-block;
		-webkit-overflow-scrolling: touch;
		overflow-y:                 hidden;
		font-size:                  100%;
		width:                      100%;
		height:                     1.9em;
		padding:                    .2em 0 .4em;
		margin:                     0 0 .4em 0;
		position:                   relative;
		border-top:                 1px dotted black;
		border-bottom:              1px dotted black;
		
		}
	
	#navbar #btn-open {
		color: white;
		}
	
	::-webkit-scrollbar {
		width:      0px; /* remove scrollbar space */
		background: transparent; /* optional: just make scrollbar invisible */
		}
	
	.nav.scroll .nav-link, #left-col .nav a {
		display:       inline;
		padding:       0 1em 0 0;
		color:         rgb(103, 148, 209);
		border-bottom: 0;
		
		}
	
	::-webkit-scrollbar {
		display: none;
		}
		
		
	}

/* SECTIONS
************************************************************************************************************************/
#sections-map-wrapper {
	position: relative;
	width:    100%;
	height:   calc(70vw * .75);
	overflow: hidden;
	/*margin-left: -20vw;*/
	/*z-index: -10;*/
	}

#sections-map {
	width:           100%;
	height:          calc(70vw * .75);
	background:      url(../img/carte_sections.svg) no-repeat;
	background-size: cover;
	position:        relative;
	/*margin-left: 30vw;*/
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	
	#sections-map-wrapper {
		margin-left: 0;
		height:      calc(100vw * .76);
		}
	
	#sections-map {
		margin: -8vw;
		
		width:  108vw;
		height: calc(100vw * .76);
		}
	
	#sections-map .xsmall {
		width:  20px;
		height: 20px;
		}
	}

/* RECHERCHE
************************************************************************************************************************/
#page .frmChercher {
	display:         flex;
	justify-content: center;
	
	margin:          0 0 2em 0;
	}

#page .frmChercher label {
	display:     block;
	height:      100%;
	font-family: Inter, sans;
	font-weight: 700;
	padding:     .8em 1em 0 0;
	}

.recherche-item {
	margin:        1em 0;
	padding:       1em 0;
	border-bottom: 1px dotted silver;
	}

.recherche-item span {
	display:    block;
	font-size:  90%;
	font-style: italic;
	}

.nombre-resultats {
	text-align: center;
	font-size:  90%;
	margin:     1em auto;
	}

.aucun-resultat {
	text-align:  center;
	margin-top:  4em;
	font-weight: 900;
	}

/* ADHÉSION
************************************************************************************************************************/
#adhesion input, #adhesion label {
	width: 100%;
	}

#adhesion input[type='checkbox'] {
	width:   1em;
	display: inline-block;
	}


#esp-form label {
	width:          100%;
	margin-top:     1em;
	padding-bottom: 1em;
	}

#esp-form label > span {
	font-weight: bold;
	display:     block;
	}

#esp-form img {
	margin-right: 1em;
	}

#esp-form textarea {
	width:         100%;
	height:        8em;
	border:        1px solid #ddd;
	border-radius: 4px;
	}

#esp-form input[type=radio] {
	display: inline-block;
	width:   1em;
	}

small.error {
	display: none;
	}


.success-message {
	text-align: center;
	}

.success-message img, .error-message img {
	width: 20vw;
	}

.error-message {
	color:      rgba(210, 82, 86, 1);
	text-align: center;
	}


#esp-form {
	display: flex;
	flex-wrap: wrap;
	}

#esp-form .field {
	flex: 0 0 100%;
	padding: 5px;
	}

#esp-form .field.half {
	flex: 0 0 50%
	}

#esp-form .field.quarter {
	flex: 0 0 25%
	}

#esp-form .field.three-quarters {
	flex: 0 0 75%
	}

#esp-form .radio-box {
	display: flex;
	flex-wrap: wrap;
	}



#esp-form .radio-box label {
	flex: 0 0 50%;
	}



#esp-form .field.captcha img {
	float: left;
	}

#esp-form .label {
	flex: 0 0 25%
	}

#esp-form .captchafield {
	width: 10em;
	margin: 1em 0 0 0;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#esp-form label span {
		font-size: 12px;
		}
	}

/* UI
************************************************************************************************************************/
.button {
	/*border-top:    1px solid silver;*/
	/*border-bottom: 1px solid silver;*/
	padding:     .5em;
	display:     flex;
	font-weight: 700;
	font-size:   100%;
	transition:  .5s ease background-color;
	}

a.button:hover {
	text-decoration: none;
	}

a.button:hover .inner {
	transform: rotate(-8deg);
	}

.button .icon {
	width:  3em;
	height: 3em;
	}

.button .caption {
	padding:         0 .75em;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-overflow:   ellipsis;
	font-family:     "Inter", sans;
	}

.button .info {
	font-size:   70%;
	font-weight: normal;
	display:     block;
	width:       100%;
	}

.person .button {
	font-size: 85%;
	padding:   0;
	margin:    10px 0;
	}

.button.small {
	padding:   .2em;
	font-size: 90%;
	}

.button.small .icon {
	width:  1.5em;
	height: 1.5em;
	}


/* PIED DE PAGE
************************************************************************************************************************/
#footer {
	background:      #B4252D;
	min-height:      20vh;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	margin-top:      10vh;
	font-family: "Inter", sans;
	}

#footer > div {
	flex:      0 0 30%;
	padding:   1em 3em;
	font-size: 90%;
	}

#footer div {
	color: white
	}

#footer a.button:hover {
	text-decoration: none;
	background:      rgba(255, 255, 255, .2);
	}

#footer #credits {
	color:       rgba(255, 2552, 255, .5);
	flex:        0 0 100%;
	text-align:  right;
	font-size:   50%;
	margin:      2em 0;
	font-family: Inter, sans;
	}

#footer #credits a {
	color: rgba(255, 2552, 255, .5);
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#footer > div {
		flex: 0 0 100%;
		}
	}

/* ERREUR 404
*********************************************************************************************************/

#message404 h3 {
	font-size: 20vw;
	margin:    0;
	padding:   0;
	}

#message404 {
	text-align: center;
	font-size:  4vw;
	}

/* SOUTIENS
*********************************************************************************************************/
#soutiens-wrapper {
	display:   flex;
	flex-wrap: wrap;
	}

#soutiens-wrapper h4 {
	font-family: 'Inter', sans-serif;
	font-size: 80%;
	flex: 0 0 100%
	}

#soutiens-wrapper a  {
	width: 12vw;
	height: 6vw;
	margin: 1vh 1vw 0 0;
	}

@media screen and (min-device-width: 320px) and (max-width: 768px) {
	#soutiens-wrapper a {
		width: 30vw;
		height: 15vw;
	}
}