html {
}
body {
	color:var(--couleurTypo);
	background-color: var(--couleurNeutre);
	padding: var(--padding);
	line-height: 100%;
	height: 100%;
	font: 12px/100% var(--typo), Helvetica, Arial, sans-serif;
}
article {
	max-width: 98vw;
	width: 98vw;
	display: flow-root;
}
section {
	display: inline-block;
	position: relative;
	width: max-content;
	margin: var(--margin);
	border: 1px solid var(--couleurBordAttenué);
	padding: var(--padding);
}
table {
	border: 0px;
	border-spacing: 0px;
	max-width: 100vw;
}
td, th {
	border-bottom: 1px solid #ddd;
}

tr:hover,
tr:focus {
	background-color: var(--selection);
	color: var(--couleurNeutre);
	outline: 0px;
}	
tr:hover .sTonique,
tr:focus .sTonique,
tr:hover .sTierce,
tr:focus .sTierce,
tr:hover .sQuinte,
tr:focus .sQuinte,
tr:hover .sSeptième,
tr:focus .sSeptième {
	background-color: var(--couleurBaseAttenué);
	color: var(--couleurNeutre);
	border: 1px solid var(--couleurNeutre);
}	
tr.ligneUne:hover,
tr.ligneUne:focus {
	color: var(--couleurTypo);
	background-color: var(--couleurNeutre);
}	
td {
	max-width: 53px;
	text-align: center;
	padding-left: 2px;
	min-width: 40px;
}
td.sTonique {
	width: 50px;
}
th.gauche {
	text-align: left;
}
th.first.gauche {
	min-width: var(--ligneTeteLarge);
}
.mode {
	width: var(--modeLarge);
}
.derive {
	font-style: italic;
}
.moins {
	color: #aaa;
}
.droite {
	display: inline-block;
	position: relative;
	right: 0px;
	float: right;
}
sup, sub {
	font-size: 60%;
}
.sTonique {
	border: 1px solid #444;
	font-weight: 600;
}
.sT,
.sTierce {
	background-color: var(--couleurBase);
	color: var(--couleurNeutre);
}
.sTierce,
.sQuinte,
.sSeptième {
	border: 0px solid #444;
}
.sT,
.sQ,
.sS {
	font-weight: 600;
}
.sQ,
.sQuinte {
	background-color: var(--couleurBase);
	color: var(--couleurNeutre);
}
.sS,
.sSeptième {
	background-color: var(--couleurBase);
	color: var(--couleurNeutre);
}
.neutre {
	font-weight: 400;
}
.titreTop {
	padding-right: 20px;
}


 /*=============== Générique*/
 .sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; 
	clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
	outline: none;
}
/*
.sr-only,
*/
.sr-only-focusable {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; 
	clip-path: inset(50%) !important; 
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}
.focusable:hover {
	clip: auto !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
	outline: none;
	position: absolute !important;
	background-color: white !important;
	border: 1px solid var(--couleurBaseFoncée) !important;
	padding: 6px !important;
	top: 12px;
	left: 12px;
	z-index: 222;
}
#QuickLinks {
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
	outline: none;
	position: absolute !important;
	background-color: white !important;
	border: 1px solid var(--couleurBaseFoncée) !important;
	padding: 6px !important;
	top: 12px;
	left: 12px;
	z-index: 222;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#QuickLinks ul {
	margin-left: 0px;
	padding-left: var(--padding);
	padding-right: var(--padding);
}
#QuickLinks a {
	color: var(--bleuCMA);
	text-decoration: none;
}
#QuickLinks h2 {
	font-size: 105%;
}
#QuickLinks a:focus {
	outline : 2px solid var(--couleurBaseFoncée)
}