/* style.css dans mon répertoire : philosophe.ca pour mon site www.philosophe.ca */

.imageflottante /* l'image qui a l'attribu class="imageflottante" dans les html sera à droite */
{
	float: right;
}

.autreparagraphe  /* Le paragraphe suivant sera mis en dessous de l'image inséré dans le paragraphe du haut, qu'elle soit à droite ou gauche */
{
	clear: both; /* clear: none|left|right|both|initial|inherit; */	
}

.salutations  /* Non utilisé pour l'instant */
{
	color: blue;
}

a /* Liens par défaut (non survolés) */
{
	text-decoration: none;
	color: blue;
	font-style: italic;
}

a:hover /* Apparence au survol des liens */
{
	text-decoration: underline;
	color: green;
}

a:active /* Quand le visiteur clique sur le lien */
{
	background-color: #FFCC66;
}

p /* texte principale */
{
	font-size: 200%;
	font-family: "Times New Roman", Arial, "Courier New", sans-serif;
	text-align: left;
	color: lime;
	width: 90%; /* Texte prend 90% de la page. Plus besoin de min-width et max-width car on est en % et non en px */
	border: 1px solid yellow; /* solid = simple. Choix possible : solid, dotted, dashed, double, groove, ridge, inset et outset */
	border-top: 1px dotted yellow; /* Bordure du haut pointillé */
	border-bottom: none; /* Bordure du bas invisible */
	padding:12px; /* 12 px = Marges intérieures de 12 pixel. On pourrait mettre "padding:16x 12x" pour 16 haut-bas et 12 gauche-droite */
	margin: auto; /* Marges extérieures */ 
	/* on peu aussi ajouter "overflow: auto;" combiné avec "max-height" si le navigateur est réduit pour avoir des barre de défilement */
}

h2  /* Défault de texte pour tous les "h2" */
{
	font-style: italic;
	color: red;
	font-size: 3em;  /* Taille relative de 3 qui s'adapte au taille des navigateur */
	text-align:center;
}

h2:hover /* Quand on pointe sur un titre */
{
	text-decoration: none;
	color: white;
} 

h3:hover /* Quand on pointe sur un texte en h3 : ici mes date de création */
{
	text-decoration: none;
	color: white;
}

em
{
	font-style: italic;
}

mark /* À utiliser si je veux marquer un mot ou un texte avec une couleur et un fond autre */
{
	background-color: white; /* Fond d'écran blanc */
	opacity: .5;
	color: green;
}

span /* À utiliser pour changer apparence du texte */
{
	color: yellow;
	font-size: 75%;
}

span:hover /* Quand on pointe sur un texte mis en "span" */
{
	text-decoration: none;
	color: red;
} 

body /* Fond d'écran général des textes */
{
	background: url("37.jpg") fixed no-repeat center;
	background-color: black;
}

body#joie /* Fond d'écran pour page joie.html */
{
	background: url("3.jpg") fixed no-repeat center;
	background-color: black;
}

body#index /* Fond d'écran de la page principale index.html*/
{
	background: url("60.jpg") fixed no-repeat center;
	background-color: black;
}

/* À partir d'ici, je met un peu plus d'indentation pour mieux comprendre les sous-niveau de bloc_page */
/* Ce n'est pas nécessaire pour le fonctionnement du css */

	/* Eléments de la page principale "index.html" , début block_page à l'intérieur de body#index */
	#bloc_page
	{
		width: auto;
		margin: auto;
	}

		/* Header début : à l'intérieur de #bloc_page*/
		header
		{
			display: flex;
			flex-direction: column;
		}

			/* Eléments de la page principale "index.html" , début titre-principal */
			#titre_principal
			{
				display: flex;
				flex-direction: column;
			}

				header h1  /* Pour définir le cartère h1 du titre principal */
				{
					font-weight: bold; /* Apparence des texte dans h1 en gras */
					font-size: 4em; /* Taille du texte h1 */
					font-family: "Times New Roman", Arial, "Courier New", sans-serif;
					margin: auto; /* Les marge se mettent automatiquement de chaque côté des bordure "border". */
					border: 3px red solid; /* Bordure en rouge. Solid = simple */
					border-radius: 20px;  /* Pour arrondire les coins des bordures */
					box-shadow: 7px 7px 14px red; /* Ombre pour les bordure en rouge */
					text-shadow: 5px 5px 10px yellow; /* Ombre pour les textes en jaune */
					text-align: center; /* Texte "h1" est centré entre les bordure "border" */
					color: yellow; /* Couleur du texte */  	
					width: 650px; /* Force à utiliser 650px le texte total */
					max-width: 90%; /* Le texte en n'ira pas plus petit que 90% de la largeur de la page*/ 
				}

				header h3  /* Pour définir le cartère h3 de la citation du titre principal */
				{
					text-align: right;
					color: red;
					margin: auto;
					width: 800px; /* Force à utiliser 700px le texte total */
					max-width: 90%;
				}   
			/* Eléments de la page principale "index.html" , fin titre-principal */
			
		/* Header fin : à l'intérieur de #bloc_page */

		/* section (début) : à l'intérieur de #bloc_page */
		section
		{
			display: flex;
			flex-direction: column; /* Ajuste et centre le texte dans la colonne sur la page principale */
		}

		section h2 /* Ajustement des "h2" de la page principale qui prédomine sur le "h2" par défaut */
		{
			width: 650px; /* On a indiqué une largeur de texte de 650px maximum */
			max-width: 90%; /* La taille du texte en "h2" n'ira pas plus petit que 90% de la page */
			margin: auto; /* Ajuste le texte selon la largeur du navigateur */
			font-style: italic;
			color: green;
			font-size: 2em;  /* Taille relative de 3 qui s'adapte au taille des navigateur */		
			border: 1px dotted yellow; /* solid = simple. Choix possible : solid, dotted, dashed, double, groove, ridge, inset et outset */
			border-bottom: none; /* Bordure du bas invisible */
			padding: 12px; /* 12 px = Marge intérieur de 12 pixel */
			margin: auto; /* Marge extérieure */	
		}

		section h3  /* Ajustement des "h3" de la page principale qui prédomine sur le "h3" par défaut */
		{
			Font-family: "Times New Roman", Arial, "Courier New", sans-serif;
			font-size: 1em;
			margin-bottom: 100px;  /* margin top 0px */  
			text-align: right;  /* Mettre le texte à droite à l'intérieur des bordure */
			color: red;
			width: 650px; /* On a forcé une largeur de texte de 650px maximum */
			max-width: 90%; /* La taille du texte n'ira pas plus petit que 90% de la page */
			border: 1px dotted yellow; /* solid = simple. Choix possible : solid, dotted, dashed, double, groove, ridge, inset et outset */
			border-top: none; /* Bordure du haut invisible */
			border-bottom: none;
			padding: 1px 12px; /* Bordure : Marge intérieur haut-bas 1x et gauche-droite 12px */
			margin: auto; /* Marge extérieure auto mais là j'essaye autre chose... 50px 50px  */	
		}   
		/* section (fin): à l'intérieur de #bloc_page */ 

		/* footer (début) : à l'intérieur de #bloc_page */
		footer
		{
			display: flex;
			flex-direction: column;
		}

			/* Eléments de la page principale "index.html" , début pied-pagel */
			#pied-page
			{
				display: flex;
				flex-direction: column;
			}

				footer h5
				{ 
					text-align: center;
					margin: auto;
					width: 500px; /* La bordure donne l'espace de 700px pour contenir le texte en "h5"*/
					max-width: 90%; /* La bordure autour du texte en "h5" n'ira pas plus petit que 90% de la page*/
					font-weight: bold; /* Taille des texte dans h5 en gras */
					font-size: 1em;
					font-family: "Times New Roman", Arial, "Courier New", sans-serif;
					border: 3px yellow solid; /* solid = simple. Choix possible : solid, dotted, dashed, double, groove, ridge, inset et outset */
					border-radius:20px;
					color: white;   
				}

				footer h5:hover /* Quand on pointe sur un paragraphe h5 */
				{
					text-decoration: none;
					color: gray;
				}
			/* Eléments de la page principale "index.html" , fin pied-pagel */

		/* footer (fin) : à l'intérieur de #bloc_page */

	/* Eléments de la page principale "index.html", fin block_page */
	
	
/* À partir d'ici, j'ai remis les même règle mais  les iphone, android etc  */	
	@media all and (max-device-width: 480px)
	{
	
	a /* Liens par défaut (non survolés pour les iphone) */
	{
		color: black;
	}
	
	h4  /* Ajustement des "h4"  */
		{
			color: #696969;  /* J'ai mis les h4 de la même couleur que le fond d'écran pour faire disparaitre le . à gauche en dessous du titre */
		}   
	
		body#index /* Fond d'écran pour iphone de la page principale index.html*/
		{
			background: none;
			background-color: #696969;
		}
		
			#bloc_page
			{
				width: auto;
			}
				
				/* section (début) : à l'intérieur de #bloc_page */
				section
				{
					display: flex;
				}

				section h3  /* Ajustement des "h3" iphone de la page principale qui prédomine sur le "h3" par défaut */
				{
					color: white;
				}   
				
				/* section (fin): à l'intérieur de #bloc_page */ 
		
	}