/* Ce fichier, cours4.css, suit le w3.css = cours3.css adapté (24 juillet 2018)
Ce fichier = cours3.css  = cours.css + cours2.css (au 26 juin 2018)
Le contenu de l'ancien "cours.css" = début du présent fichier
Le contenu de l'ancien "cours2.css" = fin du présent fichier */

@import "https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" screen;
@import "https://fonts.googleapis.com/css?family=Tangerine&display=swap" screen;

.policeDancingScript{font-family: 'Dancing Script', serif; font-size: 250%; }
.policeTangerine{font-family: 'Tangerine', serif;  font-size: 250%; }

body, div, header, footer, aside, nav, article, section	{ margin: 0; padding: 0; }

/* ======== la page et sa structure ===== */

body{
  /*font-family: 'Dancing Script', cursive, Verdana, Arial, Helvetica;*/
  font-family: Verdana, Arial, Helvetica;
  }

#container{
  margin-left: auto;
  margin-right: auto; /* margin-left et right pour centrer */
  /*max-width: 1024px;  /* largeur maximale de ce qui sera affiché */
  }

header {
	border-radius: 20px;
  margin: 5px;
	padding: 5px;
	text-align: center;
	}

#titre {
  font-weight: bold;
  font-size: 200%;
  }

nav {
	border-radius: 20px;
  margin: 5px;
	padding: 5px;
	}

nav li{list-style-type:none;}
/*nav a:hover {color: black;} commenter depuis le 25/12/2017 */

footer {
	border-radius: 20px;
	margin: 5px;
	padding: 5px;
	text-align: center;
	}

article, .article { /* ajout .article 6 mars 2019 */
	border-radius: 20px;
	padding: 10px;
	margin: 5px;
	}

article li {
  margin-top: 10px;
  margin-bottom: 10px;
  }

aside {
  background-color: yellow; /*commenté depuis le 25/12/2017 */
	border-radius: 20px;
	padding: 5px;
	margin: 5px;
  }

aside mark {
  background-color:red;
  color:white;
  }


/* ============= balises =============== */

img{
  border: none;
  }

figure{ /*mini-cours C : 2018 08 31*/
  text-align: center;
  }

figcaption{ /*mini-cours C : 2018 09 03*/
  font-size:small
  }


/* ----------- lien ------------------- */

a[href^=http]::after{
  content: url(web.gif); margin-left: 7px;
  }

/* --------- autres balises ----------- */

/*em [title]{ /* ajout du 30 juin 2018
  text-decoration:underline;
  }*/

/*[title]{ 
  border-style: none none dotted;
  }
abandonné car l'effet est désastreux sur des balises block
  */
  

/* ======== les titres ===== */

h1 {
  text-align: center;
  margin-top: 60px;
  font-weight: bold;
  }

h2 {
  padding-left: 15px;
  margin-top: 30px;
  }

h3 {
  padding-left: 30px;
  margin-top: 15px;
  }

details { /* 2021-02-10 */
  margin:0px;
  padding:4px;
  }

pre {
  margin:8px;
  padding-left:8px;  /* 2021-02-10 */
  }

/* les attributs ========================== */



/* les class ============================== */

.note {
  text-align: justify;
  font-size: 10pt;
}


.centrer{
  text-align: center;
}

.gigantesque{font-size: xx-large;}

.details{
  border-radius: 20px;
	margin: 5px;
	padding: 5px;
}

.souligne{
  text-decoration: underline;
}

.barre{
  text-decoration:line-through;
}

.centrer_bloc {
  /*width: 100%;*/
  margin: auto;
  background-color: red;
}

.red {
  background-color:red;
  color:white;
}

sup{
  color:red
  }

.vert {
  background-color:lightgreen;
  color:black;
  }

/* custom scrollbar --------- 22 avril 2020 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*
.htmlHigh {
  background-color:#F0E68C;
}

.cssHigh {
  background-color:#ADFF2F;
}

.jsHigh {
  background-color:#DDA0DD;
}
*/


/* Pour les petits écrans -------------------- */
@media screen and (max-width: 480px) {
div, header, footer, aside, nav, article, section	{ margin: 0px; padding: 0px; width: 100%; }
body {margin: 0px;} /* margin = le padding du body */
article, aside { width: 100%; padding: 5px;}
}

/* Pour les smartphones */
@media handheld {
div, header, footer, aside, nav, article, section	{ margin: 0px; padding: 0px; width: 100%; }
body {margin: 0px;} /* margin = le padding du body */
article, aside { padding: 5px;}

}



/*
Fichier complémentaire. Ici, uniquement les couleurs et les tailles
cours2.css = version on-line  (= version compressée)
*/

/* ======== la page et sa structure ===== */
/* Les couleurs sont en cours d'être nommées pour correspondre à celles du W3.CSS */

/* avant 2021-03-14
body{background-color:lime;color:black}
header{background-color:#D5B900}
article{background-color:#B9D100}
aside{background-color:#FFFF00}
footer{background-color:#D5B900}
h1{background-color:#FF1400}
h2{background-color:#FF6900}
h3{background-color:#FFC000}
*/



body{background-color:#E8E8E8;color:black} /* = w3-light-gray */
header{background-color:#E8E8E8}           /* = w3-light-gray */
article{background-color:#F4EBA4}          /* = w3-khaki      */
aside{background-color:#FFEB3B}            /* = w3-yellow     */
footer{background-color:#E8E8E8}           /* = w3-light-gray */
h1{background-color:#FF1400; padding:16px}
h2{background-color:#FF6900}
h3{background-color:#FFC000}




.code{background-color:white;color:black}
.note{color: #800080} /* #ff4500 */



/* Ci-dessous, couleurs actuellement non modifiable par javascript */

nav{background-color:#DDFFFF}   /* = w3-pale-blue */
nav a:hover{color:black}

a:link{color:blue}
a:hover{color:white}
a:visited{color:#800080}

input:invalid{background-color: #FF8A8A} /* mini-cours-javascript */
input:valid{background-color: #99FFBB} /* mini-cours-javascript */
input[readonly] {background-color:DarkGrey;} /* mini-cours-javascript + LeWeb/encodeURI.htm */

details{background-color:#F0E68C; /*grey; 2021-02-10 /vueJS/index.htm  */}
details details{background-color:#6495ED; /*2021-02-21 /vueJS/index.htm  */}

.vert{background-color:lightgreen;}
.red{background-color:red; color:white;
 padding:3px; padding-left:10px; padding-right:5px;
 margin-top:5px; margin-bottom:5px;}
.fondrouge{background-color:red;} /* depuis 13 fev 2018 */
.gris{background-color:gray;color:black} /* depuis le 12 juillet 2018 */

/* Uniquement pour l'impression */
@media print{

header,footer,nav{display:none}
.no_print{display:none}

* {color:black;background-color:white}
h2{font-size:125%;text-decoration:underline}

.note {color:black}
.vert{background-color:white}
.red{background-color:white; color:black}
.fondrouge{background-color:white;}

a{text-decoration:none}
a:link{color:black}
a:visited{color:black}
a:after {content: " (" attr(href) ")";}

}