@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins&display=swap');		/*Importes les polices depuis les serveurs de Google*/
/*#####################################################################################################
##########						Scrollbars (uniquement pour Chrome et safari)							 ##########
#####################################################################################################*/
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-button {
	display: none;
}
::-webkit-scrollbar-thumb {
	background-color: rgba(0,0,0,0.25);
	border-radius: 5px;
}
::-webkit-scrollbar-track {
	height: 100%;
}
::-webkit-scrollbar-track-piece {
	width: 3px;
	background: transparent;
}
::-webkit-scrollbar-corner {
	height: 0;
}
::-webkit-resizer {
	display: none;
}
/*#####################################################################################################
##########				Les règles de base qui apparaîtront sur toutes les pages			 ##########
#####################################################################################################*/
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;									/* 1em = 16px = 12pt */
	box-sizing: border-box;							/* Si un border est donné à un élément, le bord est à l'intérieur de l'élément, pour éviter les erreurs de calcul quand les bords grandissent */
		  overflow: hidden !important;				/*empêcher le défilement horisontal sur mobile à cause du margin du footer*/
	-ms-overflow-y: visible !important;				/*hack pour IE qui bug avec la règle précédente*/
	-ms-overflow-x: hidden;
}
.text p {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
}
@supports (-ms-ime-align: auto) {
	body {
		overflow-y: visible !important;				/*hack pour Edge qui a du mal avec le overflow hack pour IE*/	
	}
}
.viewport {
	position: relative;
	margin-right: auto;
	margin-left: auto;								/*centré dans son parent*/
	width: 240px !important;						/*la taille du viewport est déterminée en px et non en % pour rester fixe qand la taille de l'écran change*/
}
.text {
	margin: 0 auto;
	width: 100%;
}
h1 {
	display: inline-block;
	margin: 25px 0 20px -2000px;					/*déplace le bloc de 2000px sur la gauche*/
	padding: 0 5px 0 2000px;						/*déplace le contenu du bloc de 2000px sur la droite => le contenu revient là où il devait être, mais le soulignement continue vers la gauche, au-delà de la page*/
	border-bottom: 2px solid;
	font-family: 'Poppins', sans-serif;
	font-size: 1.15em;
	font-weight: bold;
	line-height: 1em;
}
/*h1.portail {										effacé pour non-utilisation
	margin-left: 0;									
	padding-left: 20px;
	background-color: white;
	border: none;
}*/
h2 {
	display: block;
	margin: 35px 0 5px 0;
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
}
a {
	display: inline-block;							/*agit comme un block, mais n'est pas seul sur sa ligne : peut-être entouré de texte*/
	padding: 1px 1px 0 1px;
	background: transparent;
	color: black;
	line-height: 1em
}
a:hover,
a:focus {
	color: white;									/*la couleur de fond des liens survolés est définie sur les pages des grands groupes, mais la couleur de la police est invariablement blanche.*/
}
a[href$=".pdf"] {
	padding: 1px 1px 1px 22px !important;
	background: transparent url(images/ico_PDF.gif) no-repeat 1px 50%;
	background-size: 16px;
}
button {
	outline: inherit !important;
}
button:hover, button:focus {
	outline: inherit !important
}
ul {
	padding-left: 12px;								/*un créé un écart devant chaque liste (sera utile plus loin)*/
	list-style: none;								/*on retire la puce de base pour les liste afin de la remplacer par une puce à nous (définie plus loin)*/
}
.action_sociale ul{
    margin: 5px !important;
}
.cpas ul{
    margin: 5px !important;
}
.accueil ul li::before, .cpas ul li::before, .action_sociale ul li::before, .maisons_repos ul li::before, .espace_pro ul li::before {
	content: "\2022";								/*on défini nous-même la puce devant chaque éléments de la liste. ici, un petit rond qu'on pourra colorer sur une autre page css*/
	display: inline-block;							/*la puce n'est plus seule sur sa ligne et donc peut être placé avant (::before) l'élément de la liste*/
	margin-left: -12px;								/*la puce est décalée de 12px vers la droite afin de se retrouver dans l'écart précisé avant*/
	width: 12px;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight: bold;
}
ul ul {
	margin-top: 0;									/*les listes ont un padding-top pour les isoler du texte. Je supprime cet espace pour ne pas dissocier les sous-listes de leurs parents*/
	padding-left: 18px;
}
p {
	margin-bottom: 4px;							/*chaque paragraphe est séparé du suivant par un petit espace, comme dans Word*/
	margin-top: 4px;
}
.gras {
	font-weight: bold;
}
.italique {
	font-style: italic;
}
.centre {
	display: block;									/*comme le texte est centré, il est seul sur sa ligne. D'où le display : block*/
	text-align: center;
}
a.centre {
	margin: 0 auto 0 auto;							/*idem pour les liens, sauf qu'un display : block élargirait le lien aux limites de son parent. donc, on conserve le display : inline-block cité plus haut*/
}
.vert {
	color: #008000;
}
.rouge {
	color: #E00000
}
.couleur {
	font-weight: bold;								/*avec les couleurs choisies, le texte DOIT IMPÉRATIVEMENT être en bold pour passer les prérequis du WCAG 2.1 AA pour un texte de 16px*/
}
.visuallyhidden {									/*n'est pas affiché à l'écran mais lu par un lecteur d'écran*/
	border: 0;
    clip: rect(0 0 0 0);							/*le contenu est... contenu... dans un contenant de 0x0px. Ce qui dépasse n'est pas affiché*/
    width: 1px;
    height: 1px;									/*le conteneur fait 1x1px*/
    margin: -1px;									/*les marges sont recouvertes de 1px dans toutes les direction. le conteneur faisait 1x1px, les marges se supperposent. Le conteneur est donc plus petit que 0x0px*/
    overflow: hidden;								/*ce qui dépasse est masqué*/
    padding: 0;
    position: absolute;								/*nécessaire pour que la propriété clip fonctionne*/
}
.fil_ariane {										/*le fil d'ariane n'est pas dans le viewport, il faut donc le gérer en parallèle du viewport*/
	display: inline;
	margin: 0 auto !important;
	width: 100% !important;
}
.fil_ariane_separateur {
	margin: 0 10px;
}
@media (min-width: 320px) {
	.viewport {
		width: 320px !important;
	}
	ul {
	padding-left: 16px;
	}
}
@media (min-width: 360px) {
	.viewport {
		width: 360px !important;
	}
	ul {
		padding-left: 20px;
	}
	ul ul {
		padding-left: 22px;
	}
}
@media (min-width: 412px) {
	.viewport {
		width: 412px !important;
	}
	h1 {
		font-size: 1.5em;
	}
	h2 {
		font-size: 1.05em;
	}
}
@media (min-width: 480px) {
	.viewport {
		width: 480px !important;
	}
	h2 {
		font-size: 1.15em;
	}
}
@media (min-width: 600px) {
	.viewport {										/*à partir de 600px de large, on bascule en affichage tablette, qui affiche plus d'éléments que son homologue smartphone. Le comportement de l'affichage change donc*/
		top: 0;
		left: 50%;									/*le bord droit du viewport est à exactement la moitié de l'écran*/
		margin-left: -268px;						/*le bord droit du viewport est déplacé de la moitié du viewport vers la gauche. Le viewport est centré, peu importe la taille de l'écran*/
		padding: 0;
		width: 550px !important;					/*le viewport, qui contient la totalité du site, est 50px plus petit afin de laisser de la place au bouton des liens rapides*/
	}
	/*h1 {
		margin-left: -2000px;						effacé pour doublon
	}
	h1.portail{
		margin-left: 0;								effacé pour non-utilisation
	}
	h2 {
		margin-left: -18px;							effacé pour... c'était moche, je l'ai retiré...
	}*/
	.fil_ariane {
		width: 550px !important;					/*comme le fil d'ariane est hors du viewport, il doit être géré comme ce dernier*/
	}
	ul {
		padding-left: 40px;
	}
}
@media (min-width: 768px) {
	.viewport {
		margin-left: -352px;
		width: 718px !important;
	}
	h2 {
		font-size: 1.15em;
	}
	.fil_ariane {
		width: 718px !important;
	}
}
@media (min-width: 1024px) {
	.viewport {
		margin-left: -480px;
		width: 974px !important;
	}
	.text {
		width: 800px;								/*bloc de texte limité à 800px pour ne pas avoire des phrases kilométriques...*/
	}
	h1 {
		padding-left: 2065px;						/*le bloc de texte étant plus petit que le viewport, un padding a été augmenté pour assouplir la transition entre le titre (aligné avec le viewport) et le bloc texte*/
		font-size: 2em;
	}
	/*h1.portail{
		padding-left: 20px;							effacé pour non-utilisation
	}*/
	h2 {
		font-size: 1.25em;
	}
	.fil_ariane {
		width: 974px !important;
	}
}
@media (min-width: 1200px) {
	.viewport {
		margin-left: -575px !important;
		width: 1150px !important;
	}
	h1 {
		padding-left: 2155px;
	}
	/*h1.portail{
		padding-left: 20px;							effacé pour non-utilisation
	}*/
	.fil_ariane {
		width: 1150px !important;
	}
}