body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	background-attachment: fixed;
}
* {
	box-sizing: border-box; /* pour que les bordures et padding soient inclus dans la taille des éléments 
							(pour ne pas avoir à en tenir compte lors de leur dimensionnement) */
	margin: 0;
}

/* cadres div */
.cadre-ext {
/*	width:100%; */
	margin: 0 auto; /* auto : centre l'élément */
	border-width: thin;
	border-style: solid;
	border-spacing: 0;
	text-align: left;
}
.cadre-int {
	margin-bottom: 2em;
	margin: 0 auto;
	border-spacing: 0;
	border-width: thin;
	border-style: solid;
	text-align: center;
	font-size: 1.1em; /* agrandit le texte à l'intérieur du cadre (titre et menus) */
}
/* fin cadres div */

/* polices titre */
.titre-blanc-noir, .titre-carnets, .titre-gris { font-size: 2em; }
.titre-petit { font-size: 1.2em; }
/* fin polices titre */

/* boutons fond d'écran */
.bouton {
	min-width: 1.6em;
	height: 1em;
	line-height: 1em;
	display: inline-block;
	border-radius: 3px;
	margin-right: 4px;
	text-align: center;
	text-decoration: none;
}
.bouton:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}
.noir {
	background-color: #101010;
	border: 1px solid #404040;
}
.blanc {
	background-color: #F0F0F0;
	border: 1px solid #343434;
}
/* fin boutons fond d'écran */

/* tableaux d'index */
.tdm, .tdmchronos {
  width: 98%;
  border-spacing: 2px;
  border-collapse: separate;
  margin: 0 auto;
}
.tdm0 {
  font-size: 1.1em;
}
.tdmp { width: 28%; }
.tdma { width: 14%; }
.tdmn { width: 25%; }
.tdmc { width: 33%; }

.icones-nb-rvb {
	min-width: 1em;
	height: 1em;
	line-height: 1em;
	display: inline-block;
	border-radius: 50%;
	margin-right: 0.2em;
}
.icone-noir { background-color: black; }
.icone-gris { background-color: grey; }
.icone-blan { background-color: white; }
.icone-roug { background-color: red; }
.icone-vert { background-color: green; }
.icone-bleu { background-color: blue; }

/* fin tableaux d'index */

.align-c { text-align: center; }
.align-d { text-align: right; }
.align-g { text-align: left; }

/* MODIFICATIONS DE STYLES EN FONCTION DES ECRANS (SMARTPHONES, TABLETTES, ET AFFICHAGE VERTICAL) 
Tablette Samsung Galaxy Tab A :                     800 x 1280
Ma tablette (pourtant censée être une Tab A !...) : 600 x 960
Samsung S9 réel : 1440 x 2960, CSS :                360 x 740
attention : la barre du navigateur + boutons de la tablette consomment environ 135 px dans la hauteur ! */

/* très petit écran (smartphone), vertical ou horizontal */
@media
	screen and (orientation:portrait) and (max-width: 580px), /* virgule = ou logique */
	screen and (orientation:portrait) and (max-height: 660px),
	screen and (orientation:landscape) and (max-width: 790px),
	screen and (orientation:landscape) and (max-height: 460px) /* 460 pour ne pas inclure la tablette = 600 - (barre du navigateur + boutons + marge) */
{
	body { font-size: 8px; }
	.bouton {
	/*	background-color: red; pour tests */
		min-width: 2em;
		height: 1.2em;
		line-height: 1.2em;
	}
	.fondsdecran { font-size: 1.3em; }
}
/* très petit écran (smartphone), vertical */
@media screen and (orientation:portrait) and (max-width: 580px)
{
	.tdm { width: 100%; }
}