* {
	min-width : 0;
}
html, body, h1, h2, a, span {
	margin : 0;
	padding : 0;
	text-decoration : none;
	word-break : break-word;
	color : inherit ;
	font-family : Open Sans;
}

table tr, tr td,
table tbody, table thead,
table tr th {
    margin : 0;
    padding : 0;
    border : none;
}

br {
	margin-bottom : 0.5em;
}

html {
	height: 100%;
}
body {
	height : 100%;

	display : grid;

	grid-template-columns : 1fr;
	grid-template-areas : 
		"header"
		"main"
		"footer";
	grid-template-rows : 64px 1fr auto;
}
header {
	width : 100% ;
	font-family : "Catamaran" ;
	background-color : #FFFFFF ; 
	z-index : 1 ;
	grid-area : 1/1/2/-1;
}
header a{
	user-select : none ;
}

header ul,
footer ul {
	list-style : none;
	margin : 0;
	padding : 0;
}

.article-img {
	width : 100%;
}
p a {
	color : #002FA7;
}
.code-inline {
	background-color : #EAEAEA;
	border-radius : 2px;
	padding : 0px 8px;
	font-family : "Deja vu";
}
.top-nav-container {
	max-width : 1080px;
	width : 100% ;
	height : 100% ;
	margin : auto ;
	display : flex;
	justify-content : space-between ;
}
.top-nav-left {
	height : 64px;
    display : flex;
    align-items : center;
}
.cas-identity {
    margin : 12px;
    display : flex;
    align-items : center;
    color : #404040;
    fill : #404040;
}
.cas-identity a {
	width : 20px;
	height : 20px;
	margin : 0 8px;
}
.top-nav-logo {
	display : block;
	height : 64px;
}
.top-nav-right {
	display : flex ;
	color : #002FAF;
	fill : #002FAF;
}
.top-nav-item {
	flex-basis : 128px ;
}
.top-nav-link {
	color : #002FAF;
	height : 64px;
	width : 128px;
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	box-sizing : border-box;
	padding-top : 8px;
}
.comp-nav-left {
	display: none;
	background-color : #404040;
}
.comp-nav-left a {
	display : block;
	height : 48px;
	padding : 0 16px;
	color : #FFFFFF;
	display : flex;
	align-items : center;
}
.top-nav-arrow {
	opacity : 0.0;
	transition : opacity 0.12s ;
	fill : currentColor;
}
.top-nav-link:hover .top-nav-arrow {
	opacity : 1.0;
}
.top-nav-sub-item {
	position : absolute;
	background-color : #FFFFFF;
	line-height : 1.5;
	max-height : 0;
	overflow : hidden;
	transition : max-height 0.24s;
	box-shadow : rgba(149,157,165,0.2) 0 8px 24px; #808080 0 8px 24px; #808080 0 8px 24px; 
}
.top-nav-sub-item li {
	padding: 16px;
}
.top-nav-item[active] .top-nav-sub-item,
.top-nav-item:focus-within .top-nav-sub-item {
	display : block ;
	max-height : 100vh;
}
.top-nav-item[active] .top-nav-arrow,
.top-nav-item:focus-within .top-nav-arrow {
	opacity : 1.0 ;
}
.top-nav-menu-icon {
	width : 32px;
	height : 32px;
	padding : 4px;
	box-sizing : border-box;
	margin : 16px;
	display : none;
	fill : #002FAF ;
}
header .logo {
	margin : 12px;
}
main {
	background-color : #F6F6F6;
	grid-area : 2/1/3/-1;
}
.main-container {
	max-width : 1080px;
	width : 100% ;
	margin : auto ;
	box-sizing : border-box;
	display: flex;
}
.bottom-nav {
	color : #FFFFFF;
	background-color : #202020;
	display : flex;
	justify-content : space-between ;
	flex-wrap : wrap ;
	grid-area: 3/1/4/-1;
}
.bottom-nav-container {
	max-width : 1080px;
	width : 100% ;
	display : flex;
	justify-content : space-between ;
	flex-wrap : wrap ;
	margin : auto ;
}
.bottom-nav-left {
	display : flex;
	padding : 16px;
}
.bottom-nav-right {
	padding : 16px;
	display : flex;
	flex-direction : column;
	align-items : center;
	width : 256px;
}
.bottom-nav-item{
	font-family : "Catamaran";
	font-weight : 700;
	font-size : 18px;
	display : inline-block;
	margin : 16px;
}
.bottom-nav-logo {
	margin : 16px;
}
footer li {
	color : #A0A0A0;
	font-weight : 400;
	font-size : 16px;
	transition-property : color;
	transition-duration : 0.24s;
}
footer li:hover {
	color : #FFFFFF;
}
.bottom-nav-info {
	font-family : "Open Sans";
	text-align : center;
}
.bottom-nav-info h1{
	margin : 0;
	font-weight : 700 ;
	font-size : 24px ;
}
.bottom-nav-info h2{
	margin : 0;
	font-weight : 400;
	font-size : 14px;
}
.bottom-nav-ext {
	display : inline-block;
}
section {
	margin-top : 32px;
	margin-bottom : 48px;
}
.text-icon {
	height : 40px;
	width : fit-content;
	cursor : pointer;
	transition-property : color, fill;
	transition-duration : 0.24s;
	display : flex;
	align-items : center;
	color : #808080;
	fill : #808080;
	flex-direction : row-reverse;
	float : right;
}
.text-icon:hover {
	color : #404040;
	fill : #404040;
}
.text-icon > svg {
	margin : 10px;
}
.text-icon[status="200"],
.text-icon[status="200"]:hover{
	color : #22C133;
	fill : #22C133;
}
.text-icon[status="400"],
.text-icon[status="403"],
.text-icon[status="500"],
.text-icon[status="400"]:hover,
.text-icon[status="403"]:hover,
.text-icon[status="500"]:hover
{
	color : #F03A3A;
	fill : #F03A3A;
}
.text-icon[disabled] {
	cursor : default;
}

.titre {
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : center;
	font-family : Open Sans;
	gap : 16px;
	margin-bottom : 32px;
}
.titre > h1 {
	font-weight : 600;
}
.titre > a{
	display : flex;
	align-items : center;
	color : #808080;
	fill : #808080;
	transition-property : fill, color;
	transition-duration : 0.24s;
}
.titre > a:hover{
	color : #404040;
	fill : #404040;
}
.titre > a > svg {
	margin : 10px;
}
.main-content {
	color : #404040;
	padding : 32px;
	flex-grow : 1;
}
.main-content h2{
	font-weight : 500;
	margin-bottom : 24px;
}
.main-content li {
	margin-bottom : 12px;
}
.main-content li a {
	color : #002FA7;
}
.main-content p {
	overflow : hidden;
	transition : height 0.12s;
}
.bottom-page {
	display : flex;
	flex-direction : column;
	justify-content : end;
	align-items : end;
	color : #404040;
}
.bottom-page a {
	display : flex;
	align-items : center;
	color : #808080;
	fill : #808080;
	transition : all 0.24s;
	cursor : pointer;
}
.bottom-page a:hover {
	color : #404040;
	fill : #404040;
}
.bottom-page svg {
    margin : 10px;
}
.nav-left, .nav-right {
	width : 150px;
	flex-shrink : 0;
	padding : 8px;
	padding-top : 16px;
	color : #808080;
}
.nav-left a {
	display : block;
	font-size : 16px;
	margin : 4px 0;
	transition : color 0.24s;
}
.nav-left a:hover {
	color : #404040;
}
.nav-left span {
	font-size : 18px;
	font-weight : 600;
	color : #404040;
}
.overlay {
	display : flex;
	background : rgba(0,0,0,0.5);
	z-index : 2;
	position : fixed;
	height : 100vh;
	width : 100vw;
	justify-content : center;
	align-items : center;
}
.dialog {
	background-color : #FFFFFF;
	border-radius : 2px;
	width : 289px;
	height : 120px;
	position : fixed;
}
.dialog .button-div {
	display : flex;
	position : absolute;
	bottom : 8px;
	right : 8px;
}
.dialog .delete-button {
	color : #FFFFFF;
	background-color : #1658F4;
	border-radius : 2px;
}
.dialog .cancel-button {
	color : #808080;
	transition : color 0.24s;
}
.dialog .cancel-button:hover {
	color : #404040;
}
.button-div div{
	padding : 12px;
	font-size : 14px;
	font-weight : 600;
	cursor : pointer;
}
.newline {
    margin : 16px 0;
    overflow : scroll;
    display : grid;
}
.newline::-webkit-scrollbar {
    display : none;
}
.newline svg {
    justify-self : center;
}
.code {
    background-color : #EAEAEA;
    font-family : "Deja Vu";
    padding : 16px;
    border-radius : 2px;
}
.code p {
	margin : 0;
}
.dropdown {
	color : #808080;
	transition : all 0.12s;
	cursor : pointer;
}
.dropdown:hover {
	color : #404040;
}
@media screen and (max-width: 720px) {
	.top-nav-container {
		flex-wrap : wrap ;
	}
	.top-nav-right {
		flex-basis : 100%;
		flex-direction : column;
		background-color : #FFFFFF;
		max-height : 0;
		overflow : hidden ;
		transition : max-height 0.12s;
	}
	.top-nav-menu-icon[active] + .top-nav-right {
		max-height : 500vh;
	}
	.top-nav-item {
		flex-basis : 100% ;
	}
	.top-nav-link {
		width : 100% ;
		padding : 0 16px;
		flex-direction : row ;
		justify-content : space-between ;
	}
	.top-nav-arrow {
		opacity : 1.0 ;
	}
	.top-nav-sub-item {
		position : initial;
		background-color : #F4F4F4;
	}
	.top-nav-menu-icon {
		display : block ;
	}
	.main-content {
		padding : 16px;
	}
	.bottom-nav-left {
		width : 100%;
		flex-wrap : wrap;
	}
	.bottom-nav-item {
		width : 100%;
	}
	.bottom-nav-right {
		margin : auto;
	}
	.nav-left {
		display : none;
	}
	.comp-nav-left {
		display : block;
	}
}

@media screen and (max-width: 960px) {
	.nav-right {
		display : none;
	}
	.cas-info {
		display : none;
	}
}