/*Version du 08/11/24
C:\Programmes PHP\MySQL5.7PHP8\vues\screen.css
Feuille de style globale utilisée dans tous les scripts afin d'obtenir des écrans homogènes. 
Elle est chargée dans les scripts qui produisent du code HTML par l'intermédiaire de l'include "enTeteHTML.html"
Lorsque les attributs CSS de cette feuille nécessitent d'être modifiés dans un script particulier on le fait 
dans ce script, par ajout d'instruction style="..." aux balises concernées.
les attributs d'une balise sont rangés dans l'ordre alphabétique
Avec une dimension des caractères de 0.9rem les lignes d'une table ont une hauteur de 1.4rem
une hauteur de 53rem permet donc d'afficher 38 lignes*/
/*1. VARIABLES GLOBALES*/
:root {
--bleu: rgba(24, 97, 220, 0.9);
--grisClair: rgba(200, 200, 200, 1);
--grisSombre: rgba(20, 20, 20, 0.8);
--jaune: rgba(242, 225, 53, 1);
--orange: rgba(255, 104, 26, 1);
--rouge: rgba(255, 0, 0, 1);
--sable: rgba(253, 236, 172, 0.3);
/*--vert: rgba(9, 122, 89, 1);ancien malachite*/
--vert: rgba(11, 140, 81, 1);/*nouveau*/
--bord-cellule: 1px solid rgba(31,160,85, 0.3);/*cellules rechercherAdherent*/
--texte: 0.9rem; /*dimension des caractères du texte*/
--titre: 1.9rem; /*titre de chacune des pages*/
--polices: Verdana, Helvetica, Times;
--largeurBoutons: 9rem;
--hauteurBoutons: 3rem;
--largeurUtile: 100%;/*entre bords droit et gauche du navigateur Mozilla*/
--hauteurUtile: 100%;
--hauteurHeader: 3rem;
--hauteurFooter: 6rem;
--opaciteBoutons: 1;
}

/*2. BALISES GLOBALES*/
html {background: var(--sable); color: var(--grisSombre); font-family: var(--polices); 
	font-size: 14px; font-weight: normal;} 
	/*14px correspondent à des caractères de 6mm de hauteur et 0.9rem de 3mm sur mon PC*/
h1 {font-size: 1.8rem;} /*titre de toutes les pages*/	
body {display: grid; margin: 1rem 1rem; padding: 0; place-items: center; 
	overflow: hidden; /*overflow-y: scroll;*/} /*outline: 1px dashed red;*/		
button {border: 1px solid rgba(150, 150, 150, 1); border-radius: 5px; display: inline-block; 
	font-size: var(--text); height: 2rem; padding: 0.1rem 0.6rem; text-align: center; 
	text-decoration: none; width: 10rem;}/*répétition bizare : font-size: 1rem; !!*/
button a {color: black; padding: 5px; text-decoration: none;} /*Retour menu*/
button:hover {background-color: var(--vert); color: white;}/*changement de couleur 
	du fond au survol de la souris*/
button a:hover{color: white;}/*changement de couleur du texte au survol de la souris*/
em {color: var(--vert); font-style: italic;}
/*Les trois balises ci-dessous sont non standard mais néanmoins reconnues par les navigateurs*/
emv {color: var(--vert); font-style: italic;}/*balise non standard équivalente à <em>*/
emo {color: var(--orange); font-style: italic;}
emr {color: var(--rouge); font-style: italic;}
fieldset {background-color: white; border: 1px solid var(--vert); border-radius: 10px; 
	margin: 0 1rem auto; padding: 1rem;}
footer {bottom: 0; height: var(--hauteurFooter); margin: 0; padding: 1rem; 
	position: fixed;width: 100%; text-align: center; }/*écran de connection*/
header {align-items: center;/*Centre verticalement*/ color: var(--vert); display: flex;  
  height: var(--hauteurHeader);/*hauteur de l'en-tête*/ justify-content: center; 
  /*Centre horizontalement*/  /*outline: 1px dashed var(--grisSombre);*/ 
  text-align: center;/*Centre le texte dans l'élément h1*/  
  text-shadow: 4px 4px 4px var(--grisClair);}/*positionné à 1rem du haut par le margin de body*/	
input {font-family: var(--polices); font-size: var(--texte); height: 2rem; 
	margin: 0 0.5rem; padding: 0; }
input[type="checkbox"] {height: 1rem; width: 1rem;}
input[type="radio"] {height: 1rem; width: 1rem;} /*outline: 1px dashed red;*/
input[type="submit"] {background-color: var(--grisClair); color: black; font-size: var(--text); 
	width: 5rem;}/*répétition bizarre : font-size: 1rem; !!*/
input[type="submit"]:hover {background-color: var(--vert); 
	color: white;}/*changement de couleur au survol de la souris*/
input[type="radio"], input[type="text"] {vertical-align: middle;}/*aligne deux balises Input*/
input[type="text"] {height: 1.4rem;}
input[type="text"].masque {display: none;}/*cf enregistrerUneRessource3.inc.php*/
kbd {background-color: var(--grisClair); border: 1px solid var(--grisSombre); border-radius: 3px; 
	padding: 0 2px;} /*touche du clavier*/
label {margin: 0; padding: 5px; } /*associe une étiquette à un champ de saisie (cf index.html)*/
legend {display: block; text-align: left;}/*commentaire associé à un fieldset*/
li {font-size: 1rem;}
select {font-family: var(--polices); font-size: var(--texte); font-weight: normal;}
table {font-size: var(--text); /*border: 1px solid var(--vert);*/ border-radius: 10px;}
td {font-size: var(--texte);}
ul {list-style: none; }/*pas de puce en début de ligne (cf menu)*/

/*3. BALISES ASSOCIEES A UNE CLASSE (. est le sélecteur de classe, # est le sélecteur d'identifiant) */
b.vert {color: var(--vert);}
b.orange {color: var(--orange);}
b.rouge {color: var(--rouge);}
button.bouton1, button.bouton2, button.bouton3 { /*boutons de colorés du menu*/
	background: white; border-radius: 10px; box-shadow: 3px 3px 0px #aaa; display: block; 
	height: var(--hauteurBoutons); line-height: 1.1rem; margin:  0.3rem 0.5rem; 
	padding: 0; position: relative; text-align: center; transition: all 0.5s; 
	width: var(--largeurBoutons);}/*outline: 1px dashed red;*/
button.bouton1, button.bouton2, button.bouton3 {border: 1px solid var(--grisSombre);}
button.bouton1:active, button.bouton2:active, button.bouton3:active {
	box-shadow: 0px 2px 0px #aaa; position: relative; top: 7px;}			
button.bouton1:hover {background: var(--vert);}
button.bouton2:hover {background: var(--orange);}
button.bouton3:hover {background: var(--rouge);}
button.bouton1 a, button.bouton2 a,  button.bouton3 a {text-decoration: none; 
	color: var(--grisSombre);}
button.bouton1 a:hover, button.bouton2 a:hover, button.bouton3 a:hover {color: white;}
button.onglet {/*onglets du menu*/
	background: var(--grisClair); border: 1px solid  black; border-radius: 10px 10px 0 0; 
	box-shadow: 3px 3px 0px #aaa; color: white; display: block; font-size: var(--text); 
	height: var(--hauteurBoutons); line-height: 1.7rem; margin: 0.2rem 0.5rem; 
	padding: 0; position: relative; text-align: center; transition: all 0.1s; 
	text-decoration :none; width: var(--largeurBoutons);}
div.centrage {align-items: flex-start; display: flex; flex-direction: row; 
	justify-content: center; /*outline: 1px dashed red;*/ overflow: hidden; 
	position: fixed; top: 6rem; width: 100%;}/*centrage sous les headers avec sous-titre*/
div.conseils {margin: 0 auto; padding: 0; width: 70%;} /*page d'accueil index.html*/
div.contain {align-items: center; display: flex; justify-content: center; margin: 1rem;} 
div.informations {margin: 2rem 1rem 1rem 2rem; padding: 0 0 0 0; width: 50%;} /*cf index.html*/
div.listesLongues {align-items: flex-start; display: flex; flex-direction: row; 
	justify-content: center; height: 50rem; margin: 0; /*outline: 1px solid blue;*/ 
	overflow-y: scroll; padding: 0; position: fixed; top: calc(var(--hauteurHeader) + 5rem); 
	width: 100%;} /*conteneur dans lequel on insère un table longue*/
div.masque {display: none;}/*zone masquée en rapport avec javaScript*/
div.menu {display: inline-flex; justify-content: space-between; margin: 0; position: fixed; 
	padding: 0; top: 6rem; width: 100%;} 
fieldset.finScript {height: 3.8rem;} /*balises de fin de script*/
span.sousTitre {margin: 4 auto; /*outline: 1px dashed red;*/ position: fixed; 
	text-align: center; top: calc(var(--hauteurHeader) + 1rem);} /*sous-titre du <header>*/
span.masque {visibility: hidden;} /*champs masqués pour JavaScript*/
.tableCotis1S td, .tableCotis2S td, .tableMC td, .tableCotis1S th, .tableCotis2S th, .tableMC th
	{border: var(--bord-cellule); text-align: center;}
.tableCotis1S td input[type="text"], .tableCotis2S td input[type="text"] {text-align: right;}
table.tableLongue {border-collapse: collapse; border-style: ridge; border-width: 1px; 
	border-color: var(--vert); margin: 0; overflow-y: scroll; padding: 0; 
	top: calc(var(--hauteurHeader) + 3rem); width: 100%;} /* position des scripts listerXXX*/
table.tableLongue td, table.tableLongue th {border: 1px solid var(--vert); text-align: center;}
table.tableLongue tr:first-child {position: sticky; top: 0; z-index: 1; 
	border: 1px solid var(--vert); } /*fixe la première ligne en haut de la liste*/
table.tableLongue tr:nth-child(even) {background-color: #f1f1f1;} /*alternance couleurs lignes paires*/
table.tableLongue tr:nth-child(odd) {background-color: white;} /*alternance couleurs - lignes impaires*/		
table.tableLongue tr:last-child {bottom: 0; font-weight: bold; position: sticky; z-index: 1;} 
	/*fixe la dernière ligne en bas de la liste*/		
.txtRouge {color: var(--rouge);}
.txtVert {color: var(--vert);}
@media only screen and (max-width: 768px) {/*pour smartphones et iphones*/
footer{display: none;}
}