:root {
  --main-color: #0372A7;
  --bg-page:153deg, #E2C254 0%, #FFFFFF 36%, #FCDD03 100%;
  --lien_color:#0140E7;
  --lien_hover_c: #F8E19C; /* color */
  --lien_hover_b: #FF0080; /* fond */
  --shadow_lien: 1px 1px #C9DCF5;

  /* ci-dessous, réservé pour boutons, mais ne marche pas pour l'instant */
	--clair: #FFFFFF;
	--bouton: 0deg, #FEBCE2 0%, #FE78C5 50%, #FE78C5 100%;
	--bouton_hover: 0deg, #FE78C5 0%, #FEBCE2 60%, #FEBCE2 100%;
	--bouton_bord: 2px solid #FC41AC;
	--fond_bouton: #FD95D0;
	--color_bouton: #FC216C;

}

body {
	font-family : Calibri, Verdana;
  font-size : 1.5em; /* 1.2em==14pt;  /* 12pt pour IE, 8pt pour imprimer*/
  height:auto; /* necessaire sinon bug Firefox */
  color: var(--main-color);
  background: linear-gradient(var(--bg-page));
  overflow-wrap: break-word;
  hyphens: auto; /* met en auto des traits d'union pour saut de ligne */
}

a {
	text-decoration:none;
}

h1 { color : #8f8f2f;}


.fuschia { /* rose_fonce pour compatibilité */
   font-weight: bold;
   font-size : 1.3em;
   color : #FE1D61; /* avant : #cc0066; */
}

.centrer {text-align:center; margin: auto; display:block;}
.tcentrer {margin-left: auto; margin-right:auto;} /* pour les tables*/


.ligne {
  color:#cc0066;
  background-color:#cc0066;
  width:95%;
  height:4px;
}

#entete_page {
  font-size: 0.9em; background-color:#A0F0FE; margin: auto; padding:4px; border-radius: 10px;} 

/*************************************/
/*****                          ******/
/*****    partie pied_page      ******/
/*****                          ******/
/*************************************/

#pied_page {
  font-size: 16px; 
  color: #0140E7;
  background-color:#A0F0FE; 
  text-shadow: 1px 1px #C9DCF5;
  margin: auto; 
  padding:8px; 
  border-radius: 10px;
}

#pied_page:link { 
	text-decoration:none; 
	color:#005588;}

#pied_page:hover {
  color: #F8E19C;
  background-color: #FF0080;
  text-weight:normal;
  text-shadow: none;
}


/*************************************/
/*****                          ******/
/*****    partie table      ******/
/*****                          ******/
/*************************************/
/* TABLE : c'est comme le body, mais il faut que ce soit spécifié, 
   car ça prend la valeur par défaut qui est différente du body.*/
table {
  border-collapse: collapse;
  border: 1px #9FBAFF solid;
  font-family : Calibri, Verdana;
  font-weight: normal; /* bold en script, normal pour imprimer */
}
table td {
  margin: 0px 0px;
  padding: 0px 0px;
  border: 1px #9FBAFF solid;
   
}



/*************************************/
/*****                          ******/
/*****      partie bouton       ******/
/*****                          ******/
/*************************************/

#bouton {
  font-size: 2.0em; 
  color: #FFFFFF;
  background-color:#FD95D0; 
  text-shadow: 1px 1px #FECFEA;
  margin: auto; 
  padding:8px; 
  border-radius: 10px;
}

#bouton:link { 
	text-decoration:none; 
	color:#980359;}

#bouton:hover {
  color: #FFFFFF;
  background-color: #FF0080;
  text-weight:normal;
  text-shadow: none;
}



/*************************************/
/*****                          ******/
/*****      partie cadres       ******/
/*****                          ******/
/*************************************/
/* --------------------------------------------------------
   dans '.cadre_xx' - il n'y a qu'un cadre sans styles
   dans '.encadre_xx' -> il y a un fond + du style
----------------------------------------------------------- */
.cadre {
  border: #CD366F 2px solid;
  margin:5px;
  border-radius: 10px;
}
.cadre_rose{
  border: #CD366F 2px solid;
  background-color:#fed3ed; color:#f10580; border-bottom: #c60478 5px solid; border-left: #fa129d 5px solid; border-top: #fa129d 5px solid; border-right: #c60478 5px solid;
  border-radius: 10px;
  font-weight: bold;
  line-height: 1.1em;
}

.cadre, .cadre_rose {
text-align:left; display:inline-block; padding:5px;
}



/*************************************/
/*****                          ******/
/*****   partie livre jaune     ******/
/*****                          ******/
/*************************************/

.titre {
    color: #FE1D61;
    font-size: 2.0em;
    font-weight: bold;
    text-align: center;
}


/*************************************/
/*****                          ******/
/*****   correction             ******/
/*****   taille police          ******/
/*****   selon                  ******/
/*****   densité pixels         ******/
/*****                          ******/
/*************************************/
/* cas supérieur à densité = 1.5 ou 144 dpi ou 1.5dppx (= valeurs tablette) */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) { 

  body {
    font-size:2.0em;
  }

  .chanson {
    font-size:2.0em;
  }
  
  .titre {
    font-size: 2.2em;
  }
  .moyen_titre {
    font-size: 2.3em;
  }
  .gros_titre {
    font-size: 3.5em;
    line-height: 1.1em;
  }
 
    
}