/*
--------------------------------------------------------------------------
feuille de style crée par Denis Lambert, le 19-04-2020"../
	http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html
	http://www.siteduzero.com/tutoriel-3-13661-liste-des-balises-xhtml.html
	http://stylescss.free.fr/proprietes-categs.php
"id" fonctionne exactement de la même manière que "class", à un détail près : il ne peut être utilisé qu'une fois.
	# avant le nom de l'id
	. avant le nom de la classe
<span> </span> : c'est une balise de type inline (pas de retour à la ligne). exemple : <p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>
<div> </div> : c'est une balise de type block (retour à la ligne).

Directement dans le programme PHP : 	http://css.tests.free.fr/index.php
	- <span style="font-style: italic;"> ... </span>
	- <span style="font-weight: bold;"> ... </span>
	- <span style="text-decoration: underline;"> ... </span>
	- <span style="font-weight: bold; text-decoration: underline;"> ... </span>
	- <span style="font-weight: bold; font-style: italic;"> ... </span>
	- <span style="font-weight: 800; color: red; background-color: blue; padding:.2em 1em;"> ... </span>
--------------------------------------------------------------------------
le sélecteur "class" est toujours précédé d'un point
*/
HTML {
/*	font-size: 100%;	/*	initialisation de la taille des polices	*/
}
body {
	background: #FFF6A8;
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
	font-size: 1em;   /*    1em  ou  100%  ou  16px ...     */
/*	line-height: 150%;	/*	espacement entre les lignes	*/
/*	color: black;	*/
}

input, select, textarea {
/*	font-size: 1em;	/*	Pour que les éléments des formulaires s'affichent correctement	*/
}

label
{
	font-style: italic;
	font-weight: bold;	/*	bold;	*/
/*	font-size: 1em;	/*	em  ou  %  ou  px ...     */
	color: black;
/*	line-height: 150%;	/*	espacement entre les lignes	*/
}

#cellule_avec_bordure
{
	border:1px solid black;
}

#cellule_sans_bordure
{
	border:0px solid black;
}

strong {
 color: red;
 }
/*	Stabylo	*/
em {
   color:green;
   background-color: yellow;
	}

#bloc_page	/*	bloc entourant toute la page --> paramètres différents selon ORDINATEUR ou MOBILES	*/
{
/*	width: 98%;	/*	% : pourcentage de l'écran   px : largeur en pixels	*/
	margin: auto;	/*	le design sera centré	*/
}

/*------------------------------------------------------------------------------*/
/*	https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox	*/
/*------------------------------------------------------------------------------*/
#entete
{
    display: flex;
    flex-direction: row;			/*	ROW ou COLUMN	*/
	flex-wrap: nowrap;				/*	WRAP ou NOWRAP (retour à la ligne)	*/
	justify-content: space-between;	/*	flex-start : aligné à gauche;
										- flex-end : aligné à droite;	 center : centré;
										- space-between : alignés sans espaces aux extrémités (collé au bord);
					 					- space-around : étirés sur tout l'axe, mais un espace aux extrémités	*/
	align-items: center;			/*	"align-items" : alignement sur l'AXE SECONDAIRE	:
										- stretch : éléments étirés sur tout l'axe (valeur par défaut);
										- flex-start : alignés au début		- flex-end : alignés à la fin
										- center : centre		- baseline : alignés sur la ligne de base (semblable à flex-start)	*/
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
	font-style: italic;
	text-align: center;
/*	line-height: 150%;	/*	espacement entre les lignes	*/
/*	font-size: 1.3em;			/*	em  ou  %  ou  px ...     */
}
.element
{
	margin: auto;		/*	alignement des cellules	*/
}
/*	permettre à un élément de grossir pour occuper tout l'espace restant	*/
.element:nth-child(2)	/* 2 indique que l'on prend le deuxième bloc-élément */
{
/*	flex-grow (capacité à grossir), flex-shrink (capacité à maigrir), flex-basis (taille par défaut)	*/
	flex: 1;			/*	Le nombre indiqué dans "flex" indique dans quelle mesure il peut grossir par rapport aux autres	*/
}
/*	aligner un seul élément	*/
.element:nth-child(2) /* 2 indique que l'on prend le deuxième bloc-élément */
{
	background-color: blue;
	align-self: flex-end;	/* Seul ce bloc sera aligné :	fleex-start  end  center  beetwen  around  stretch	*/
}

#entete h1 {
	font-size: 2em;			/*	em  ou  %  ou  px ...     */
	font-style: italic;		/*	Les titres seront en italique ! */
	color: red;
	text-align: center;
	margin: auto;			/*   px ou % ou "auto" (centré)	*/
/*	text-transform: none;	/*	"none" ou "uppercase" (majuscules) ou "lowercase" (minuscules)	*/
	border: none;			/*   border:none (pas de bordure)	ou	border: 1px  solid  black;  */
}
#menu_genealogie {
	text-align: center;
/*
    display: flex;
    flex-direction: row;			/*	ROW (horizontal) ou COLUMN	* /
	flex-wrap: nowrap;				/*	WRAP ou NOWRAP (retour à la ligne)	* /
	justify-content: space-around;	/*	flex-start : aligné à gauche;
										- flex-end : aligné à droite;	 center : centré;
										- space-between : alignés sans espaces aux extrémités (collé au bord);
					 					- space-around : étirés sur tout l'axe, mais un espace aux extrémités	* /
	align-items: center;			/*	"align-items" : alignement sur l'AXE SECONDAIRE	:
										- stretch : éléments étirés sur tout l'axe (valeur par défaut);
										- flex-start : alignés au début		- flex-end : alignés à la fin
										- center : centre					- baseline : alignés sur la ligne de base (semblable à flex-start)	* /
	font-size: 1em;			/*	em  ou  %  ou  px ...     * /
*/
}

#saisie_fiche	/*	inscription et modification des fiches	*/
{
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
/*	font-size: 1.1em;			/*	em  ou  %  ou  px ...     */
/*	text-align: center;	*/
	line-height: 1.6em;	/*	espacement entre les lignes		em  ou  %  ou  px ...  */
}

#sources
{
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
	font-size: 1em;
/*	text-align: center;
/*	line-height: 130%;	/*	espacement entre les lignes	*/
/*	font-size: 1.3em;			/*	em  ou  %  ou  px ...     */
}

#choix_criteres	/*	choix des critères	*/
{
/*	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;	*/
	font-size: 1em;	/*	em  ou  %  ou  px ...     */
/*	text-align: center;	*/
	line-height: 150%;	/*	espacement entre les lignes	  % ou "em"	*/
}

#fiche_ref	/*	la fiche du référent (parents, conjoint, enfants, frères et soeurs	*/
{
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
	font-size: 1em;			/*	em  ou  %  ou  px ...     */
/*	text-align: center;	*/
	line-height: 1.3em;	/*	espacement entre les lignes	  % ou "em"	*/
}

#ul {	/*	listes déroulantes	*/
  list-style-type: none;	/*	liste déroulante sans "point"	*/
}

#header {
/*	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;	*/
/*	font-size: 1em;   /*    em  ou  %  ou  px ...     */
/*	font-style: italic; /* Les paragraphes seront en italique ! */
/*	color: blue;
	font-weight: normal;
	text-align: center;   	/*   justify, center ...    */
/*  text-indent: 0px;	*/ 	/*   indentation première ligne   */
/*	text-transform: none;	*/	/*   majucules, minuscules ...   */
}

/*	pour cibler seleument les MOBILES	(utiliser "max-width" = PETITS ECRANS	"max-device-width" = MOBILES	*/
@media all and (max-device-width: 480px)
{
	#entete h1
	{
		margin-top: 20px; /* Ca c'est pour éviter que le corps colle trop au haut de page, sur les Tél.MOBILES  */
		font-size: 2em;	/*	affichage du titre du site	*/
	}
    #corps afficher_element
    {
		display: none;
    }
	#entete afficher_element
    {
		display: none;
    }
    #menu afficher_element
    {
		display: none;
    }
    #sources afficher_element
    {
		display: none;
    }
    #choix_criteres afficher_element
    {
		display: none;
    }
    #pied_de_page afficher_element
    {
		display: none;
    }
	#menu {		/*	agrandir les images*/
		background-color: blue;
/*		font-size: 1.25em;	/*	en utilisant <span> on changera la taille dans la même balise	*/
/*		color: green;	*/
	}
}

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
@media screen and (min-width: 1024px) and (max-width: 1280px)
{
}
/* Sur les téléviseurs */
@media tv
{
}
/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)
{
/*	font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
/*	background-color: #FFF6A8;	*/	/*	ou  background-color: rgb(253,244,223);	*/
	margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous     ( bottom = en bas )  */
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
/*	color: black;	*/
    border: none;	/*   border:none (pas de bordure)	ou	border: 1px  solid  black;  */
}

/*	pour cibler les PETITS ÉCRANS	(utiliser "max-width" = PETITS ECRANS	"max-device-width" = MOBILES	*/
@media screen and (max-width: 800px)	/*	("screen" ou "all")		(ou 1024)	*/
{
    /* Vos règles CSS pour les mobiles ici */
	#entete h1
	{
		margin-top: 20px; /* Ca c'est pour éviter que le corps colle trop au haut de page, sur les Tél.MOBILES  */
		font-size: 2em;	/*	affichage du titre du site	*/
	}
    #corps afficher_element
    {
		display: none;
    }
	#entete afficher_element
    {
		display: none;
    }
    #menu afficher_element
    {
		display: none;
    }
    #sources afficher_element
    {
		display: none;
    }
    #choix_criteres afficher_element
    {
		display: none;
    }
    #pied_de_page afficher_element
    {
		display: none;
    }
	#menu {		/*	agrandir les images*/
		background-color: blue;
		font-size: 1.25em;	/*	en utilisant <span> on changera la taille dans la même balise	*/
/*		color: green;	*/
	}
}


/*	A GARDER : ici, c'est @MEDIA ALL	Affichage ou non un élément (logo, date, ...)	*/
@media all and (max-width: 800)	/*	(ou 1024)	petits écranss ou MOBILES	("screen" ou "all")	*/
{
    #afficher_element
    {
        display: none;
    }
}

#pied_de_page {
	text-align: center;
	font-size: 0.8em;
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
	padding: 5px;
/*	color: black;    /*   couleur du texte   */
/*	border: none;  /*   border:none (pas de bordure)	ou	border: 1px  solid  black;  */
}
/*	#pied_de_page a, a:link, a:hover, a:active, a:focus, a:visited {*/
#pied_de_page a {
/*	font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif;	*/
/*	font-size: 0.8em;	*/
/*	font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
    text-decoration: underline;		/* Les liens sont soulignés "underline" ou non "none" */
    color: #9f3e00;	/*	ocre foncé = 9f3e00	*/
}
#pied_de_page a:hover {    /* lien : quand la souris passe dessus  */
	text-decoration: none;		/* Les liens sont soulignés "underline" ou non "none" */
	}


#corps {
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
/*	background-color: #FFF6A8;	*/	/*	ou  background-color: rgb(253,244,223);	*/
	font-size: 1em;	/*	ou  20pt;	*/
/*	margin-bottom: 10px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous     ( bottom = en bas )  */
	padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
/*	color: black;	*/
    border: none;	/*   border:none (pas de bordure)	ou	border: 1px  solid  black;  */
}
#corps h1   { /* Tous les titres h1 du corps */
/*	font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
    font-size: 1.9em;	/*	ou  20pt;	*/
	font-style: italic; /* Les titres h1 seront en italique ! */
	text-align: center;
	text-transform: none; /*   permet de mettre en majuscule, minuscule ...   */
    margin: 0px;           /*   auto : On peut donc demander à ce que le block soit centré    */
	border: 0px  solid  black ;   /*   bordure intérieure = 1 px   */
	color: #ff704f;	/*  saumon	*/
}

#corps h3 {    /*   h3 = utilisé pour les LIENS	*/
/*	font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
    font-size:  0.9em;	/*	ou  12pt	*/
	font-style: italic; /* Les titres h3 seront en italique ! */
	color: blue;
	text-align: center;   /*  justify, center, left, right   */
	text-transform: none; /*   permet de mettre en majuscule, minuscule ...   */
	}

#corps h6 {  /*    h6  sert à mettre des commentaires sur la page   */
/*	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;	*/
    font-size:  0.7em;	/*	ou  12pt	*/
	font-style: italic; /* Les titres h6 seront en italique ! */
	color: green;
	text-align: center;   /*  justify, center, left, right   */
	text-transform: none; /*   permet de mettre en majuscule, minuscule ...   */
	}
#corps p { 
/*	font-family: "Comic Sans MS", "times new roman", arial, Wide Latin, serif; */
/*	color: black;	*/	/*	FONT, TAILLE et COULEUR à SUPPRIMER si on veut utiliser les couleurs paramétrées	*/
    font-size: 1em;   /*    1em  ou  100%  ou  16px ...     */
	font-weight: normal;
	text-align: justify; 
    text-indent: 20px;	/*   indentation première ligne   */
	padding: 5px ;		/*   marge intérieure       top, bottom, left, right   ou  padding tout court */
    margin: 5px;		/*   auto : les blocks seront centrés    */
	}
/*------------------------------------------------------------------------------------*/
/*	adaptation du CSS pour les MOBILES	*/
/*	https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries	*/
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
/* Paragraphes en bleu par défaut */

#corps a, a:link, a:hover, a:active, a:focus, a:visited {
	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif;
/*	font-size: 1em;   /*    1em  ou  100%  ou  16px ...     */
/*	font-style: italic; */	/* Les liens seront en italique */
    text-decoration: underline; /* Les liens sont soulignés */
/*	background-color: #FFF6A8; */
/*	color: black; */	/*	ocre foncé = 9f3e00	*/
}
#corps a:hover {    /* lien : quand la souris passe dessus  */
	text-decoration: none; /* Les liens sont soulignés ou non */
	}
#corps a:active, a:focus  {   /*    quand on clique sur le lien    */
    background-color: red;
	}
#corps img {     /*   une marge à droite des images pour éviter que le texte ne colle à la photo   */
    margin-right: 5px; /* Ca c'est pour éviter que le paragraphe ne colle trop à droite de l'image située à gauche  */
	}

/* ==================================================================================== */
/* 			   					 LES TABLEAUX   			 							*/
/* ==================================================================================== */
#table {
/*	font-size: 1em;   /*    1em  ou  100%  ou  16px ...     */
/*	line-height: 150%;	/*	espacement entre les lignes	*/
}
.fiche
{
	table-layout: fixed;	/*	"table-layout" définit l'algorithme utilisé pour disposer les cellules	*/
	color: green;	/*	ocre foncé = 9f3e00	*/
/*	width: 120px;	*/
/*	border: 1px solid red;	*/
	padding:0px 5px 0px 5px;
}

/*----------------------------------------------------------------------------------
Pour faire une INFO-BULLE ovale avec une taille fixe.

voir :  http://classe.bilingue.free.fr/fr/TDM-html/memento/info-bulles.html#
-----------------------------------------------------------------------------------*/
a.bulle-ovale
{ 
position:relative;
color: black;
/*	color: #9f3e00;	/*	ocre foncé = 9f3e00	*/
/*	color:#C800F0;	/*	jaune = #C800F0	*/
text-decoration:none;	/*	Les liens sont soulignés "underline" ou non "none" */
font-family:"times new roman", arial, verdana, sans-serif;
text-align:center;
}

a.bulle-ovale:hover
{
background: none;
z-index: 50;
}

a.bulle-ovale span
{
display: none;
}

a.bulle-ovale:hover span
{
display: block;
position: absolute;
top: -150px; 	/*	-140	*/
left: -120px; 	/*	ou -120	*/
font-family:chalkboard,verdana, sans-serif;
text-align:center;
font-size:13px;
	color: #9f3e00;	/*	ocre foncé = 9f3e00	*/
/*	color:#C800F0;	/*	jaune = #C800F0	*/
/*	color:#F9EC00;	*/
font-weight:normal;
background:  #d4e6f1 ; 	/* #A2B6F1;		si "rien" = transparent		*/
padding: 5px;
width: 450px;
height: 115px;
border-style: 1;
    -webkit-border-radius: 40px / 40px;		/*	ovale :  75px / 40px; 	*/
    -moz-border-radius:    40px / 40px; 	/*	ovale :  75px / 40px; 	*/
    border-radius:         40px / 40px;		/*	ovale :  75px / 40px; 	*/
    box-shadow:20px 20px 10px #182856;
    border:#0843EF solid 1px;
text-indent: 0;
}


#page {	/*	choix des n° de pages	*/
/*	font-family: "times new roman", "Comic Sans MS", arial, Wide Latin, serif; 	*/
    font-size: 10pt;
    margin-left: 10px; /*  marge à gauche */
    margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous     ( bottom = en bas )  */
    padding: 0px; /* Pour éviter que le texte ne colle trop à la bordure */
	color: black;
}

/* ------------------------------------------------- */

.droit		{ font-style: normal; }
.italic		{ font-style: italic; }
.gras		{ font-weight: bold; 	color: black; }
.grasrouge	{ font-weight: bold; 	color: red; }
/* ------------------------------------------------- */
.noir		{ color:black; }
.gris		{ color:gray; }
.blanccasse	{ color:#fff6ab; }
.blanc		{ color:white; }
.violet		{ color:mediumvioletred; }
.indigo		{ color:#4B0082; }
.fushia		{ color:fuchsia; }
.bleufonce	{ color:mediumblue; }
.bleu		{ color:blue; }
.vert		{ color:green; }
.vertolive	{ color:olive; }
.jauneclair	{ color:yellow; }
.jaune		{ color:gold; }
.saumon		{ color:coral; }
.orange		{ color:orangered; }
.rouge		{ color:red; }
.brun		{ color:maroon; }
/* ------------------------------------------------- */
.minuscule { font-size: 0.3em; }		/*	ou font-size: xx-small; */
.trespetit { font-size: 0.6em; }		/*	ou font-size: x-small; 	*/
.petit     { font-size: 0.8em; }		/*	ou font-size: small; 	*/
.normal    { font-size: 1em; }			/*	ou font-size: medium; 	*/
.grand     { font-size: 1.3em; }		/*	ou font-size: large; 	*/
.tresgrand { font-size: 1.5em; }		/*	ou font-size: x-large; 	*/
.enorme	   { font-size: 1.9em; }		/*	ou font-size: xx-large; */
/* ------------------------------------------------- */
.times	   { font-family:"times new roman"; }
.comic	   { font-family:"Comic Sans MS"; }
/* ------------------------------------------------- */
.droite	   { text-align: right; }
.centrer   { text-align: center; }
.gauche	   { text-align: left; }
.justify   { text-align: justify; }
.clignotant { text-decoration: blink; }	/* le titre sera clignotant ! (ne fonctionne pas sous internet explorer) */
.souligne  { text-decoration: underline; }
.barre     { text-decoration: line-through; }
.ligne_dessus { text-decoration: overline; }
.surligne  {	/* surligner certains mots d'un texte */
	background-color: yellow;
/*	color: black;	*/
}
.retrait  {
   list-style-position: outside;
}
.retrait1  {
	margin-left: 2em;	/*	1em	ou	20px	*/
}