/* reset */
*,
*::before,
*::after {
	box-sizing: border-box;

}

* {
	margin : 0;
	padding: 0;
}

ul {
	list-style: none;
}

html:focus-within {
	scroll-behavior: smooth;
}

html {
	height: 100%;
}

body {
	min-height    : 100vh;
	text-rendering: optimizeSpeed;
}

a:not([class]) {
	text-decoration-skip-ink: auto;
}

img,
picture {
	max-width: 100%;
	display  : block;
}

input,
button,
textarea,
select {
	font: inherit;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration       : 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration      : 0.01ms !important;
		scroll-behavior          : auto !important;
	}
}

/* html {
	font-size: 16px;
} */

:root {
	--jaune       : rgb(246, 192, 31);
	--active1     : hsl(60, 84%, 73%);
	--rouge       : rgb(210, 33, 44);
	--vert        : #067a53;
	--vert_hoverbg: rgb(48, 165, 9);
	--bleu        : #0a5592;
	--lbleu_bg    : rgb(196, 225, 248);
	--main_bg     : #fff;
	--maincolor   : #333;
	--light_border: #ddd;
}

/* zi base */
body {
	display              : flex;
	flex-direction       : column;
	/* gap               : 2rem; */
	font-family          : 'Marianne';
	font-size            : 1rem;
	line-height          : 1.5rem;
	background           : white;
}

header,
footer {
	width     : 100%;
	background: var(--bleu);
}

header {
	padding-block: 2rem;
}

footer {
	padding-block: .5rem;
	margin-top   : auto;
	text-align   : center;
	color        : white;
	font-size    : .85rem;
}

footer a {
	color          : #fff;
	text-decoration: none;
	transition     : color .3s;
}

footer a:hover {
	color          : var(--active1);
	text-decoration: underline;
}

#main_content {
	padding-block   : 2rem;
	width           : min(1920px, 100%);
	margin-inline   : auto;
	padding-inline  : 1rem;
	/* padding-block: 2rem; */
}

.ot_wrapper {
	width         : min(1600px, 100%);
	margin-inline : auto;
	padding-inline: 1rem;
}

.simple_content {
	width         : min(900px, 100%);
	margin-inline : auto;
	padding-inline: 1rem;
}

.content p,
.content ul {
	margin-bottom: 1.5rem;
}

.content h2 {
	text-align: left;
	color     : var(--bleu);
}

.content a {
	text-decoration: none;
	color          : var(--vert);
}

.content a:hover {
	text-decoration: underline;
}

@media (width > 1600px) {
	.ot_wrapper {
		padding-inline: 0;
	}
}

h1,
h2 {
	font-family: 'Spectral';
	font-weight: 500;
	text-align : center;
	font-size  : clamp(1.5rem, 0.77rem + 3.64vw, 3.5rem);
	line-height: 1.3em;
}

h1 {
	margin-bottom: 1.5rem;
}

h2 {
	font-size    : clamp(1.13rem, 0.54rem + 2.92vw, 2rem);
	margin-bottom: 1rem;
}

p {
	margin-bottom: 1.4rem;
}

.txt_center,
.text_center {
	text-align: center;
}

/* maps */
.leaflet-popup-tip-container {
	box-sizing: border-box;
	display   : none;
}

.leaflet-popup-content-wrapper {
	box-sizing   : border-box;
	border-radius: 0;
	background   : white;
}

.leaflet-popup-content {
	font-family: 'Marianne', sans-serif;
	margin     : 0 5px;
	padding    : 20px 15px;
	width      : 240px;
	text-align : center;
	background : white;
	color      : #444;
}

.leaflet-popup-content hr {
	border-top: 1px solid #666;
	margin    : .8rem auto 1.5rem auto;
}

.leaflet-popup-content h2 {
	font-weight  : 700;
	font-size    : 1.4rem;
	margin-bottom: 1rem;
}

.leaflet-popup-content p {
	margin   : 0 0 .3rem 0;
	padding  : 0;
	font-size: 1.1rem;
}

.leaflet-popup-content a {
	padding        : 4px 15px;
	background     : #5858e2;
	color          : white;
	text-decoration: none;
	border-radius  : 50rem;
}

.leaflet-popup-content a:hover {
	background: #0e7617;
}


.leaflet-bar button,
.leaflet-bar button:hover {
	background-color: #fff;
	border          : none;
	border-bottom   : 1px solid #ccc;
	width           : 26px;
	height          : 26px;
	line-height     : 26px;
	display         : block;
	text-align      : center;
	text-decoration : none;
	color           : black;
}

.leaflet-bar button {
	background-position: 50% 50%;
	background-repeat  : no-repeat;
	overflow           : hidden;
	display            : block;
}

.leaflet-bar button:hover {
	background-color: #f4f4f4;
}

.leaflet-bar button:first-of-type {
	border-top-left-radius : 4px;
	border-top-right-radius: 4px;
}

.leaflet-bar button:last-of-type {
	border-bottom-left-radius : 4px;
	border-bottom-right-radius: 4px;
	border-bottom             : none;
}

.leaflet-bar.disabled,
.leaflet-bar button.disabled {
	cursor        : default;
	pointer-events: none;
	opacity       : .4;
}

.easy-button-button .button-state {
	display : block;
	width   : 100%;
	height  : 100%;
	position: relative;
}


.leaflet-touch .leaflet-bar button {
	width      : 30px;
	height     : 30px;
	line-height: 30px;
}

.mapi {
	background: white;
	font-size : 1.1rem;
	color     : black;
}

.lltooltip,
.lltooltip_opaque {
	font-family     : 'Marianne', sans-serif;
	background-color: rgba(255, 255, 255, 1);
	border          : 1px solid rgba(100, 148, 237);
	border-radius   : 5px;
	font-weight     : 400;
	font-size       : .9rem;
}


/* nav */

#topnav ul {
	display        : flex;
	flex-wrap      : wrap;
	gap            : .5rem;
	justify-content: center;
	justify-items  : center;
	align-items    : center;
	color          : white;
}

#topnav ul a {
	font-size      : 1.1rem;
	color          : #fff;
	text-decoration: none;
	transition     : color .3s;
	white-space    : nowrap;
	;
}

#topnav ul a:hover,
#topnav ul a.active,
#topnav ul a:focus-visible {
	color          : var(--active1);
	text-decoration: underline;
}

/* home */

#homemap {
	font-family  : 'Marianne';
	width        : min(800px, 100%);
	height       : 600px;
	margin-inline: auto;
	margin-top   : 1rem;
}

/* formuulaires */
.sond_blah {
	width        : min(800px, 95%);
	padding-block: 1.5rem;
	margin-inline: auto;
}

.form_wrapper {
	width        : min(700px, 95%);
	border       : 1px solid var(--light_border);
	margin-inline: auto;
	background   : #fff;
	box-shadow   : 0 0 12px rgba(0, 0, 0, 0.2);
}

h2.formtitle {
	font-family  : 'Spectral';
	font-weight  : 300;
	text-align   : center;
	font-size    : clamp(1.25rem, 0.84rem + 2.05vw, 2.38rem);
	line-height  : 1.2em;
	padding      : .5rem;
	border-bottom: 1px solid var(--light_border);
	background   : rgba(0, 0, 0, .08);
	margin       : 0;
}

.form_wrapper form {
	padding: 2rem;
}

.pristine-error {
	color     : red;
	font-size : .85rem;
	text-align: inherit;
}

.has-danger .custom-select .select-selected,
.has-danger input,
.has-danger textarea,
.has-danger .checkmark {
	border: 2px solid red !important;
}

.has-success .custom-select .select-selected,
.has-success input,
.has-success textarea,
.has-success .checkmark {
	border: 2px solid green !important;
}

.forminp {
	margin-bottom: 1.4rem;
}

.forminp label:not(.resp_choice_label) {
	display      : block;
	font-size    : 1rem;
	font-weight  : 400;
	margin-bottom: .7rem;
	text-align   : left;
}

textarea,
input[type=text],
input[type=email],
input[type=number],
input[type=password] {
	width        : 100%;
	height       : 100%;
	background   : #fff;
	border       : 1px solid #ccc;
	border-radius: 5px;
	transition   : border 300ms;
	padding      : 5px 1rem;
	font-size    : 1rem;
	font-family  : inherit;
	color        : #333;
}

button.sub_butt {
	background    : green;
	padding       : .4rem 2em;
	color         : white;
	text-transform: uppercase;
	font-family   : inherit;
	font-weight   : 400;
	font-size     : 1.2rem;
	letter-spacing: 1px;
	border        : 0;
}

.text-help {
	padding-top: 4px;
}

.form_alert {
	padding      : .5rem .8rem;
	font-weight  : 500;
	margin-bottom: 1.5rem;
}

.alert_error {
	font-weight: 600;
	border     : 1px solid rgb(255, 0, 0);
	background : rgb(255, 0, 0, .1);
	color      : red;
}

.alert_info {
	font-weight: 600;
	border     : var(--bleu);
	color      : var(--bleu);
	background : var(--lbleu_bg);
}

button[type=submit] {
	border       : 1px solid var(--vert);
	border-radius: 5px;
	background   : var(--vert);
	color        : white;
	font-weight  : 600;
	transition   : background .3s;
	padding      : .4rem 1.2rem;
	cursor       : pointer;
}

button[type=submit]:hover {
	background: var(--vert_hoverbg);
}

#step2school {
	margin-block: 1.5rem;
}

#step2school li {
	display        : flex;
	justify-content: space-between;
}

#step2school li span.detail {
	display    : flex;
	font-weight: 600;
}

a.backbutt {
	display        : block;
	margin-block   : .8rem;
	border         : 1px solid var(--vert);
	border-radius  : 5px;
	background     : var(--vert);
	color          : white;
	font-weight    : 500;
	text-decoration: none;
	transition     : background .3s;
	padding        : .2rem 1rem;
	text-align     : center;
}

a.backbutt:hover {
	background: var(--vert_hoverbg);
}

/* radio choix un poil sioux */
.resp_choice_wrap {
	width          : min(300px, 95%);
	margin-inline  : auto;
	display        : flex;
	justify-content: space-between;
	margin-bottom  : 1.2rem;
}

.resp_item {
	width   : 45%;
	height  : 40px;
	position: relative;
}

.resp_item .resp_choice {
	appearance   : none;
	/* display   : none; */
}

.resp_choice_label {
	display      : grid;
	place-content: center;
	position     : absolute;
	top          : 0;
	left         : 0;
	width        : 100%;
	height       : 100%;
	border-radius: 50rem;
	background   : #ddd;
	color        : #444;
	font-weight  : 600;
	cursor       : pointer;
	transition   : background .25s, color .25s;
}

.resp_choice_label:hover {
	background: var(--vert);
	color     : #fff;
}

.resp_choice:checked+.resp_choice_label {
	background: var(--vert);
	color     : white;
}

/* page résultats carte charts etc */

#sous_menu {
	background     : #efefef;
	padding-block  : .4rem;
	font-size      : 1rem;
	display        : flex;
	justify-content: center;
}

#sous_menu ul {
	display        : flex;
	flex-wrap      : wrap;
	justify-content: center;
	gap            : .8rem;
}

#sous_menu ul a {
	text-decoration: none;
	color          : var(--bleu);
	font-weight    : 500;
	white-space    : nowrap;
}

#sous_menu ul a:hover {
	color: var(--vert);
}

#schoolmap_wrap {
	width        : min(900px, 98%);
	margin-inline: auto;
	font-family  : 'Marianne', sans-serif;
}

.range_wrap {
	padding-block  : 1rem;
	display        : flex;
	gap            : .25rem;
	flex-direction : column;
	justify-content: center;
	align-content  : center;
	align-items    : center;
}

.range_wrap p {
	margin   : 0;
	font-size: .95rem;
}

/*
input range
*/
:root {
	--track-height: 12px;
	--thumb-height: 60px;
	--thumb-width : 60px;
}

input[type="range"] {
	appearance   : none;
	background   : transparent;
	width        : 18rem;
	cursor       : pointer;
	border-radius: 3px;
}

/* Input Track */

/* Chrome, Safari, Edge (Chromium) */
input[type="range"]::-webkit-slider-runnable-track {
	background   : linear-gradient(to right, #16a8dd 0%, #077117 100%);
	height       : var(--track-height);
	border-radius: 3px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
	background   : linear-gradient(to right, #16a8dd 0%, #077117 100%);
	height       : var(--track-height);
	border-radius: 3px;
}

/* Input Thumb */

input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance        : none;
	width             : 20px;
	height            : 20px;
	border-radius     : 50%;
	border            : 1px solid var(--bleu);
	background        : white;
	cursor            : pointer;
	-webkit-transition: background 0.15s ease-in-out;
	transition        : background 0.15s ease-in-out;
	margin-top        : -4px;
}

input[type="range"]::-webkit-slider-thumb:hover {
	background: var(--vert_hoverbg);
}

input[type="range"]:active::-webkit-slider-thumb {
	background: var(--vert_hoverbg);
}

input[type="range"]::-moz-range-thumb {
	width : 20px;
	height: 20px;

	border-radius  : 50%;
	border         : 1px solid var(--bleu);
	background     : white;
	cursor         : pointer;
	-moz-transition: background 0.15s ease-in-out;
	transition     : background 0.15s ease-in-out;
}

input[type="range"]::-moz-range-thumb:hover {
	background: var(--vert_hoverbg);
}

input[type="range"]:active::-moz-range-thumb {
	background: var(--vert_hoverbg);
}

input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--vert_hoverbg);
}

/* Focus styles */

input[type="range"]:focus {
	outline: none;
}

/* ends l'input range qui tue samère et sa grand-mère */

#school_map {
	width      : 100%;
	height     : 600px;
	font-family: 'Marianne';
}

/* charts */
canvas {
	/* border: 2px solid red; */
	width       : 100%;
	aspect-ratio: 2/1;
}

.chart-container {
	position    : relative;
	margin      : auto;
	width       : min(600px, 98%);
	aspect-ratio: 2/1;
}

#zilegend {
	margin-inline   : auto;
	margin-block-end: 1rem;
	width           : 50%;

}

#zilegend ul {
	display        : flex;
	flex-wrap      : wrap;
	justify-content: center;
	gap            : .5rem;
}

#zilegend li {
	white-space  : preserve nowrap;
	margin-bottom: .5rem;
	font-size    : 1.3rem;
}

#res_stats {
	order: 2;
}

#res_grid {
	display: grid;
	gap    : 2rem;
}

#stats_grid {
	padding-inline: 1.5rem;
	display       : grid;
	gap           : 1rem;
	container-type: inline-size;
	container-name: statsgrid;
}

.unstats_pave {
	text-decoration: none;
	color          : #333;
	background     : #eee;
	border         : 1px solid #bbb;
	border-radius  : 8px;
	padding        : 1rem;
	transition     : background .3s, color .3s;
}

.unstats_pave.active,
.unstats_pave:hover {
	background: var(--vert);
	color     : white;
}

@container statsgrid (width > 600px) {
	#stats_grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.unstats_pave:first-child {
		grid-column    : span 2;
		/* display     : flex;
		justify-content: center; */
	}
}

.unstats_pave dl {
	margin-bottom: 1rem;
}

.unstats_pave dl dt {
	font-weight: 700;
}

@media (width > 1000px) {
	#res_grid {
		display              : grid;
		gap                  : 1.5rem;
		grid-template-columns: 1fr 1fr;
	}

	#res_stats {
		order: 0
	}
}