/* Mise en forme du texte de la boîte de dialogue */
h1 {
	font-size:14px;
	font-style:bold;
	color:#1a8eb0;
	}
h2{
		color:#1a8eb0;
		font-size:12px;
		margin-bottom:2px;
	}
h3 {
		color:#1a8eb0;
		font-size:10px;
		margin-top:2px;
		margin-bottom:-2px;
	}
p,li{
	font-size:8px;
	font-style:normal;
	color:grey;
	}
@font-face {
    font-family: 'Script Ecole 2';
    src: url('scriptecole2-webfont.woff2') format('woff2'),
         url('scriptecole2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Icone licence */
.ccbyncsa{
	background-image:url("../icones/cc-by-nc-sa-min.svg");
	background-size: 100%;
	background-repeat:no-repeat;
	background-position: center; 
	background-color:transparent;
	width:80px;
	height:15px;
	position:relative;
	border:none;
}
/* */
.auteur {
	text-align:center;
	font-size:10px;
	line-height:10px;
}
.site_web{
	font-size:10px;
	line-height:10px;
	margin-left:10px;
	display:inline-block;
	text-align:center;
	color:1a8eb0;
	}
.version{
	text-align:center;
	font-size:10px;
	margin:10px;}
.sources{
	text-align:left;
	font-size:8px;
}
/****************************/
/* Mise en forme de la page */
/****************************/
body {
color:black;
background-color:white;
font-family:'Script Ecole 2', sans-serif;
}
.mode_sombre{background-color:black;}/* Changement de fond en cas de mode sombre */
/*****************************/		
 /* Tableau de Numération */	
 /***************************/		
#tableau {
	position:absolute;
	width:1300px;
	height:200px;
	left:70px;
	background: lightgrey; /* on définit la couleur de fond argent*/
	overflow:hidden;
}
table {
	/*border-collapse:collapse;*/
}
td.jaune, td.orange, td.vert,td.bleu{
	border:1px solid black;
		}
#nombre input{
	position: absolute;
	top:50px;
	left:0px;
	width:190px;
	height:40px;
	font-size:30px;
	font-family:'Script Ecole 2', sans-serif;
	text-align:right;	
	border:1px solid black;
	border-radius:5px;
	background-color:white;
	}

/*****************************************************/
/* Mise en forme des en-têtes Milliards, millions... */
/***************************************************/			
#ligne1,#ligne2{
	display: flex;
	flex-direction: row;
	}
#ligne1{height:60px;}
#ligne2{height:40px;}

.entete_classe {
	width:192px;
	text-align:center;
	vertical-align : top;
	font-size:40px;
	top:5px;
	border:1px solid black;
	margin:2px;
}
/******************************/
/* Mise en forme des unités */
/****************************/
.unites {
top: 0px;
width:60px;
font-size:30px;
text-align:center;
border:1px solid black;
margin:0px 2px;
}
/* Définition des couleurs des classes */			
.orange{background-color:rgba(255,128,0,0.5);}
.jaune{background-color:rgba(255,255,0,0.5);}
.bleu{background-color:rgba(128,128,255,0.5);}
.vert{background-color:rgba(128,255,128,0.5);}
.violet{background-color:rgba(255,128,255,0.5);}
.invisible{background-color:transparent;	border:1px solid transparent;}

/************************************/
/* Mise en forme partie Décimale */
/**********************************/
/* Taille "indice" inclinée à 45° pour la partie décimale */			
.decimal{
	position: absolute;
	transform: rotate(-45deg);	
	top:50px;
	font-size:15px;
	}
/* Position des étiquettes du tableau */
#dixiemes{
	left:1010px;
}
#centiemes{
	left:1070px;
}
#milliemes{
	left:1130px;
}
#dixmilliemes{
	left:1190px;
	top:40px;
}
/**************************************/
/* Mise en forme des cases chiffres */
/************************************/	
.glisse_nombre {
	position:absolute;
	left:0px;
	width:1680px;
	display: flex;
	flex-direction: row;
}
.chiffre{
	width:60px;
	background:transparent;
	border:1px solid transparent;
	margin:0px 2px;
	}
.chiffre>input{
	width:90%;
	text-align:center;
	font-size:50px;
	font-family:'Script Ecole 2', sans-serif;
	background:transparent;
}
.normal{border:1px solid black;}
.rouge{
	border:2px solid red;	
}
#chiffre_unite{
	position:absolute;
	left:924px;
	width:52px;
	background:transparent;
	margin:0px 2px;
	border:5px solid red;	
	}
/********************************/
/* Mise en forme de la virgule */
/*******************************/
#la_virgule{
	position:absolute;
	color:black;
	font-size:120px;
	top:50px;
	left:970px;
	}
/**********************************************************/
/* Définition des boutons d'incrémentation des chiffres */
/*********************************************************/
.bouton{
	background-size:100%;
	background-repeat:no-repeat;
	background-position: center; 
	background-color:transparent;
	width:20px;
	height:20px;
	position:relative;
	border:none;
	cursor:pointer;
}

/* Position du bouton - */
.moins{
	background-image:url("../icones/moins.svg");
	left:10px;
}
/* Position du bouton + */
.plus{
	background-image:url("../icones/plus.svg");
	left:10px;
}
.increment{
	display: flex;
	flex-direction: row;
	}


/****************************************************************/
/* Définition des boutons Multiplier / Diviser / Remise à zéro */
/**************************************************************/
.bouton2{
	width:40px;
	height:40px;
	background-size:100%;
	background-repeat:no-repeat;
	background-position: center; 
	background-color:transparent;
	border:3px solid #72a7cfff;
	border-radius:50px;
	color:#72a7cfff;
	text-align:center;
	line-height:40px;
	font-weight:bold;
	font-family:'Script Ecole 2', sans-serif;
	font-size:12px;
	margin:auto;
	}
.bouton2:hover{
		cursor:pointer;
}
/* Boutons Multiplier */
#multiplier,#diviser{
	position:absolute;
	width:50px;
	height:200px;
	margin:auto;
	display: flex;
	flex-direction: column;
}
/* Boutons Diviser */
#diviser{
	left:1390px;
	}
/* bouton diviser */
.btn{
	cursor:pointer;
	top:10px;
	width:40px;
	height:40px;
	margin:auto;
	text-align:center;
	background-color: transparent;
	background-size:100%;
	background-repeat:no-repeat;
	background-position: center; 
	background-color:transparent;
}
.multiplier{
	background-image:url("../icones/multiplier.svg");
}.diviser{
	background-image:url("../icones/diviser.svg");
}
/* Boutons Aide, Effacer et Recommencer */
#menu{
	position:absolute;
	width:180px;
	height:40px;
	top:0px;
	margin:auto;
	display: flex;
	flex-direction: row;
	}
/* icône Recommencer */
.recommencer{
	background-image:url("../icones/recommencer.svg");
}

/* icône Effacer */
.effacer{
	background-image:url("../icones/corbeille.svg");
}
/* icône Aide */
.apropos{
	background-image:url("../icones/infos.svg");
}
/* icône Mode Sombre*/
.sombre{
	background-image:url("../icones/mode_sombre.svg");
}