﻿/*
1°) lorsque les CSS sont en fichier séparé, on met seulement de <style> à </style> dans ce fichier (Style.css par ex.)
2°) l'appel au fichier CSS se fera par: <link rel="stylesheet" href="Style.css"/> (à placer entre <meta> et <head> )
3°) display:inline est nécessaire pour pouvoir mettre plusieurs titres ou paragraphes à la queue-leu-leu sur la même ligne
4°) l'inconvénient est que le saut de ligne automatique après le titre ou paragraphe avec inline disparaît
        il faut donc ajouter un <br> à la suite pour forcer le retour à la ligne
5°) lorsqu'un <br> est à éviter à l'aide de @media, on utilise #px () et #px (display:none)
6°) lorsque les CSS sont dans un fichier séparé, la 1ère ISN du style ne peut pas être "h1", mais un "p" (raison inconnue)
7°) pour aligner un paragraphe avec le précédent, utiliser display:inline et pour un retour ligne, utiliser un paragraphe avec display:block
8°) pour forcer le changement de ligne après un paragraphe display:inline, mettre un </br> juste avant le </p>
*/
<style>

*	body { margin: 0; padding: 0; }

	a { line-height: 1rem; font-size: 1rem; }
/*	p { border-style: solid; border-width: 1px; border-color: red; margin: 0.5rem }  */  /* margin = intervalle entre blocs */
	p { margin: 0.5rem }    /* margin = intervalle entre blocs */
	
	h1 { background-color: yellow ; margin: 0px; display : inline ; }
	h2 { background-color: yellow ; margin: 0px; display : inline ; }
	h3 { background-color: yellow ; margin: 0px; display : inline ; }

/* Selon la largeur de fenêtre, adaptation de l'affichage du haut de la page index.html  */
	#large { display: block }
	@media screen and (max-width:699px) { #large { display: none } }
	#etroit { display: block }
	@media screen and (min-width:700px) { #etroit { display: none } }
	
	#pl { margin-left: 5%; }
	@media screen and (max-width:700px) { #pl { margin-left: 0%; } }
	#pl1 { margin-left: 10%; font-size: 1rem; }
	@media screen and (max-width:700px) { #pl1 { margin-left: 5%; } }
	#pl2 { margin-left: 15%; font-size: 1rem; }
	@media screen and (max-width:700px) { #pl2 { margin-left: 10%; } }
	#pl3 { margin-left: 20%; font-size: 1rem; }
	@media screen and (max-width:700px) { #pl3 { margin-left: 15%; } } 
	
	#bib { font-size: 80%; color: gray ; }
	#war { font-size: 80%; color: red; background-color: #ffe6e6; font-style: italic; }  				
	#dim { font-size: 80%; color: #33cc33; background-color: #e6ffe6; font-style: italic; }  				

	#t1 { background-color: yellow ; margin: 0px; display : inline ; font-size: 28px; font-weight: bold; }
	#t2 { background-color: yellow ; margin: 0px; display : inline ; font-size: 22px; font-weight: bold; }
	#t3 { background-color: yellow ; margin: 0px; display : inline ; font-size: 16px; font-weight: bold; }
			
   	#po { display : inline ; margin: 0px; margin-left: 0px; font-size:16px; line-height:0px; }
	#pb { background-color: rgb(200,245,255) ; display : inline ; color: blue; margin: 0px; margin-left: 0px; font-size:16px; }

	#pd1 { display : inline ; color: blue; margin: 0px; margin-left: 25px; font-size:16px; }
	#pd2 { display : inline ; color: blue; margin: 0px; margin-left: 50px; font-size:16px; }
	#pd3 { display : inline ; color: blue; margin: 0px; margin-left: 75px; font-size:16px; }

	#pd1b{ background-color: rgb(200,245,255) ; display : inline ; color: blue; margin: 0; margin-left: 25px; font-size:16px; }
	#pd2b{ background-color: rgb(200,245,255) ; display : inline ; color: blue; margin: 0; margin-left: 50px; font-size:16px; }
	#pd3b{ background-color: rgb(200,245,255) ; display : inline ; color: blue; margin: 0; margin-left: 75px; font-size:16px; }

	#p02 { display : inline ; margin-left: 0px; font-size: 14px; }
	@media screen and (max-width:700px) { #p02 { display : block ; margin: 0px; font-size: 14px; text-align: center; line-height: 12px;} }
</style>
