@charset "UTF-8";

:root {
	--padding: 12px;
	--padding-25: calc( var(--padding ) / 4);
	--padding-50: calc( var(--padding ) / 2);
	--padding-75: calc( var(--padding ) / 1.5);
	--padding-150: calc( var(--padding ) * 1.5);
	--padding-200: calc( var(--padding ) * 2);
	
	--sidebar: 56px;
}

body {
	margin: 0;	
}

#body-main {
	margin: 0;
	display: flex;
	flex-direction: row;
	padding: var(--padding);
    gap:  var(--padding);
}

a {
	text-decoration: none;
}

input[type = submit] {
	height: 48px;
	margin: 0;
	padding: 10px 24px;
	border: none;
	border-radius: 24px;
	background-color: var( --md-sys-color-primary-container );	
	color: var( --md-sys-color-on-primary-container );
	cursor: pointer;	
}

ul.list-style-none {
	list-style: none;
}

form {
	margin: 0;	
	display: flex;
    flex-direction: column;
    gap: var( --padding-25);
}

form footer {
	padding: var( --padding-50);
    min-height: 40px;
    margin-top: auto;
}

.sidenav {
  background-color: #111; /* Black */
  padding-top: 20px;
}

#body-rail {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: var( --sidebar); /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  overflow-x: hidden; /* Disable horizontal scroll */
  top: var(--padding); /* Stay at the top */
  left: var(--padding);

    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var( --padding-50);

}

.rail-container {
	width: var( --sidebar);
	height: 56px;
	text-decoration: none; 
}

.rail-button {
	padding: 4px 12px;
	color: var( --md-sys-color-on-primary-container );
	border-radius: 16px;
}

.rail-container.selected .rail-button {
	background-color: var( --md-sys-color-primary-container );	
}

.rail-container:not(.selected):hover .rail-button {
	background-color: var( --md-sys-color-surface-container );	
}

.rail-text {
	margin-top: 4px;
}

#body-main {
	margin-left: calc(var( --sidebar) + var( --padding));
	flex: 1;
	display: flex;
    flex-direction: column;
	gap: var( --padding);	
}

#main-header {
	display: flex;
	gap: var( --padding-50);	
    flex-direction: row;
}

#main-header > * {
    text-align: center;
    align-content: center;
	padding: var( --padding-50);
	border-radius: var( --padding-150);
}

#main-header > *:first-child {
	width: calc( 66.66% - var( --padding-50 ));
}

#main-header > *:last-child {
	width: calc( 33.33% - var( --padding-50 ));
}

/* ecran horizontal */
@media (min-aspect-ratio: 1) {
	#main-header > * {
		height: calc( 33.33vh - var( --padding ));
	}
}

/* ecran vertical */
@media (max-aspect-ratio: 1) {
	#main-header > * {
		height: calc( 50vw - var( --padding ));
	}
}

#main-header > #main-header-left {
	background-color: var( --md-sys-color-primary-container );	
	color: var( --md-sys-color-on-primary-container );
}

#main-header > #main-header-right {
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

header > section > * {
	margin: 0;
	padding: 0;
}

.card, .leaflet-popup-content {
	margin: 0 !important;
	padding: 0 !important;
    border-radius: var(--padding) !important;
	display: flex;
    flex-direction: column;
    gap:  var(--padding-50);
    height: 100%;    
}

.card > header, .leaflet-popup-content > header {
	margin: 0 !important;
	margin-bottom: var(--padding-50) !important;	
	padding: var(--padding-50) var(--padding) !important;
	border-top-left-radius: var(--padding) !important;
    border-top-right-radius: var(--padding) !important;
}

.card > header > *, .leaflet-popup-content > header > * {
	display: block;
}

.card > header img { 
	vertical-align: bottom;
}

.card > ul.list-style-none {
	margin: 0;
	padding: var(--padding-50);
}

.card > md-outlined-text-field, .card > md-outlined-select {
	padding-inline: var(--padding-50) var(--padding-50);	
}

.leaflet-popup-content > *:not(:first-child):not(:last-child):not(ul):not(md-outlined-text-field),
.card > *:not(:first-child):not(:last-child):not(ul):not(md-outlined-text-field) {
	margin: 0;
	padding-inline: var(--padding-50) var(--padding-50);	
}

.card > footer, .leaflet-popup-content > footer {
	min-height: var(--padding);
	padding: var(--padding-50);
	margin-top: auto;	
}

.card.primary, .leaflet-popup-content {
    border: 1px solid var( --md-sys-color-primary-fixed );
}

.card.primary > header, .leaflet-popup-content > header {
	background-color: var( --md-sys-color-primary-container );
	color: var( --md-sys-color-on-primary-container );
}

.card.primary, .card.primary a, .card.primary a:visited {
	color: var( --md-sys-color-primary );
}

.card.secondary {
    border: 1px solid var( --md-sys-color-secondary-fixed );
}

.card.secondary > header {
	background-color: var( --md-sys-color-secondary-container );
	color: var( --md-sys-color-on-secondary-container );
}

.card.secondary, .card.secondary a, .card.secondary a:visited {
	color: var( --md-sys-color-secondary );
}

.card.tertiary {
    border: 1px solid var( --md-sys-color-tertiary-fixed );
}

.card.tertiary > header {
	background-color: var( --md-sys-color-tertiary-container );
	color: var( --md-sys-color-on-tertiary-container );
}

.card.tertiary, .card.tertiary a, .card.tertiary a:visited {
	color: var( --md-sys-color-tertiary );
}

.card.error {
    border: 1px solid var( --md-sys-color-error-fixed );
}

.card.error > header {
	background-color: var( --md-sys-color-error-container );
	color: var( --md-sys-color-on-error-container );
}

.card.error, .card.error a, .card.error a:visited {
	color: var( --md-sys-color-error );
}

.button {
	background-color: var( --md-sys-color-primary-container );
	color: var( --md-sys-color-on-primary-container );
	padding: 5px 24px 8px 16px !important;
	border-radius: 48px;
}

.flex-column {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--padding);
}

.flex-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--padding-50);
	height: fit-content;
}

.flex-row > * {
	height: auto;
}

.width-25 {
	width: calc( 25% - var(--padding-50) );
	margin-inline: auto;
}

.width-33 {
	width: calc( 33.33% - var(--padding-50) );	
	margin-inline: auto;
}

.width-50 {
	width: calc( 50% - var(--padding-50) );	
	margin-inline: auto;
}

.width-66 {
	width: calc( 66.66% - var(--padding-50) );	
	margin-inline: auto;
}

.width-75 {
	width: calc( 75% - var(--padding-50) );	
	margin-inline: auto;
}

.grid-2, .grid-3, .grid-4, .grid-1-3, .grid-5, .grid-1-1-3, .grid-6 {
	display: grid;
	gap: var(--padding-50);
	grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
}

/* smart breakpoint */
@media screen and (min-width:384px ) and (max-width:767px) {
	.grid-2, .grid-3, .grid-4, .grid-1-3, .grid-5, .grid-6 {
	    grid-template-columns: 1fr 1fr;
	}
}
/* tablet breakpoint et ecran vertical */
@media (min-width:768px) and (max-aspect-ratio: 1) {
	.grid-2 {
	    grid-template-columns: 1fr 1fr;
	}
	.grid-3, .grid-4 {
		display: grid;
		grid-auto-rows: 1fr;
	}
	 .grid-3 {
	    grid-template-columns: 1fr 1fr;
	}
	.grid-4 {
	    grid-template-columns: 1fr 1fr 1fr;
	}
	.grid-1-3 {
	    grid-template-columns: 1fr 2fr;
	}
	.grid-5 {
	    grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.grid-6 {
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	}
/* tablet breakpoint et ecran vertical */
@media (min-width:768px) and (min-aspect-ratio: 1) {
	.grid-2 {
	    grid-template-columns: 1fr 1fr;
	}
	.grid-3, .grid-4 {
		display: grid;
		grid-auto-rows: 1fr;
	}
	 .grid-3 {
	    grid-template-columns: 1fr 1fr 1fr;
	}
	.grid-4 {
	    grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.grid-1-3 {
	    grid-template-columns: 1fr 3fr;
	}
	.grid-5 {
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	.grid-6 {
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

article a[href^="http"]:after,
article a[href^="https://"]:after
{
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

/*
 * SYMBOLES 
 */

.icon-small {
	width: 1.3em;
    height: 1.3em;
    font-size: 12px;
    border-radius: 12px;
    color: white;
 	background-color: var( --md-sys-color-primary );	
 	color: var( --md-sys-color-on-primary );	
}

/*
 * COULEURS 
 */

.background-primary {
 	background-color: var( --md-sys-color-primary );	
 	color: var( --md-sys-color-on-primary );	
}

.background-secondary {
 	background-color: var( --md-sys-color-secondary );	
 	color: var( --md-sys-color-on-secondary );	
}

.background-tertiary {
 	background-color: var( --md-sys-color-tertiary );	
 	color: var( --md-sys-color-on-tertiary );	
}

.background-error {
 	background-color: var( --md-sys-color-error );	
 	color: var( --md-sys-color-on-error );	
}

/**
 * MISE EN PAGE
 */
 
.float-end {
    float: inline-end;	
}

article.tree {
	overflow-x: auto; 
}

.tree {
	display: flex;
	flex-direction: column;
    gap: var( --padding-25);
}

.tree > * {
	display: grid;
	grid-template-columns: 10em auto;    
	align-items: center;
    padding: 0;	
}
.tree .tree {
    border-left: 4px solid var( --md-sys-color-tertiary );;
    border-radius: 6px;
}

.tree-item {	
	padding: var( --padding-25) var( --padding-25) var( --padding-25) var( --padding-50);
	}

.tree-item:not(.selected), .tree-item:not(.selected) a {	
	background-color: var( --md-sys-color-primary-container );	
	color: var( --md-sys-color-on-primary-container );	
	}

.tree-item.selected, .tree-item.selected a {	
	background-color: var( --md-sys-color-primary );	
	color: var( --md-sys-color-on-primary );	
	}

.tree-item:not(.terminal) {	
    border-top-left-radius: var( --padding-50);
    border-bottom-left-radius: var( --padding-50);
	}
.tree-item.terminal {	
    border-radius: var( --padding-50);
	}
	
.map { 
	width: 900px;
	height: 505px;
	margin:auto;
	border: 1px solid black;
    border-radius: var( --padding );
}