@charset "utf-8";
/* -------------------------------------------------------------------------------------------------------------
    TABLE DES MATIÈRES - FLexi CCW V1.3
	Centre de compétences Web (CCW)
	Centre de services partagés du Québec (CSPQ)
	8 Juillet 2013
----------------------------------------------------------------------------------------------------------------
	:: FLEXI.CSS.1 - REINITIALISATION ET STANDARDS GLOBAUX
	:: FLEXI.CSS.2 - STRUCTURE DU DOCUMENT EN GRILLE (RANGÉES, COLONNES)
	:: FLEXI.CSS.2.1 - Colonnes base 12
	:: FLEXI.CSS.2.2 - Colonnes base 11
	:: FLEXI.CSS.2.3 - Colonnes base 10
	:: FLEXI.CSS.2.4 - Colonnes base 9
	:: FLEXI.CSS.2.5 - Colonnes base 8
	:: FLEXI.CSS.2.6 - Colonnes base 7
	:: FLEXI.CSS.2.7 - Colonnes base 6
	:: FLEXI.CSS.2.8 - Colonnes base 5
	:: FLEXI.CSS.2.9 - Colonnes base 4
	:: FLEXI.CSS.2.10 - Colonnes base 3
	:: FLEXI.CSS.2.11 - Colonnes base 2
	:: FLEXI.CSS.2.12 - Colonnes base 1
	:: FLEXI.CSS.2.13 - Colonnes pour mobile
	:: FLEXI.CSS.3 - PIV HAUT ET BAS
	:: FLEXI.CSS.3.1 - PIV Haut
	:: FLEXI.CSS.3.1.1 - PIV Haut Écran 
	:: FLEXI.CSS.3.1.1.1 - Outils 
	:: FLEXI.CSS.3.1.1.2 - Rétrocompatibilité 
	:: FLEXI.CSS.3.1.2 - PIV Haut mobile
	:: FLEXI.CSS.3.2 - PIV Bas
	:: FLEXI.CSS.4 - TYPOGRAPHIE
	:: FLEXI.CSS.4.1 - Typographie titres
	:: FLEXI.CSS.4.2 - Typographie paragraphes
	:: FLEXI.CSS.4.3 - Typographie citations
	:: FLEXI.CSS.4 - Typographie séparateurs
	:: FLEXI.CSS.4.5 - Typographie abréviations-acronymes
	:: FLEXI.CSS.4.6 - Typographie liens
	:: FLEXI.CSS.4.7 - Alignements et styles divers
	:: FLEXI.CSS.5 - STYLES POUR LES OUTILS DU PIV
	:: FLEXI.CSS.5.1 - Texte agrandi via l'outil AgrandirTaille du PIV 
	:: FLEXI.CSS.5.2 - Grille affichée via l'outil afficherGrille du PIV 
	:: FLEXI.CSS.6 - STYLES POUR IMPRESSION
	

/*====================================================================================================
	:: FLEXI.CSS.1 - REINITIALISATION ET STANDARDS GLOBAUX 
==================================================================================================== */
html, body, div, span, applet, object, iframe,  h1, h2, h3, h4, h5, h6, p, blockquote, pre,  a, abbr, acronym, address, big, cite, code,  del, dfn, em, img, ins, kbd, q, s, samp,  small, strike, strong, sub, sup, tt, var,  b, u, i, center,  dl, dt, dd, ol, ul, li,  fieldset, form, label, legend,  table, caption, tbody, tfoot, thead, tr, th, td,  article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary,  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: top;
	text-decoration: none;
	/*line-height:normal;*/
}
html {font-size:100%; height: 100%;  overflow-y: scroll; -webkit-text-size-adjust: 100%;} /* Force scrollbar in non-IE and Remove iOS text size adjust without disabling user zoom */

body {
	font-family: Arial, Helvetica, sans-serif;min-height: 100%; 
	-webkit-font-smoothing:antialiased; 
	font-smoothing:antialiased; 
	text-rendering:optimizeLegibility; /* Améliore l'affichage du texte */
	background:#fff;
	/*Gérer les mots trop longs susceptibles d'exploser d'une boite*/
	word-wrap:break-word; /* la propriété a été abandonnée en 2013, mais est pourtant compatible jusqu'à IE6, donc on la garde */
	overflow-wrap:break-word; /* Remplacement de word-wrap qui a été abandonné */
	word-break: break-word; /* Consigne comprise apparamment par Safari Mobile uniquement. Pourtant break-word n'est pas une valeur comprise dans les standards. On garde car nécessaire tout de même */
	text-wrap:avoid;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	
}

/* TABLES */
table {border-collapse: collapse; border-spacing: 0;}
th {text-align: left}
tr, th, td {border-bottom: 0 solid #333}

/* FORMULAIRES */
form {margin: 0}
fieldset {border: 0;padding: 0}
textarea {overflow: auto; vertical-align: top}
legend {*margin-left: -.75em}
button, input, select, textarea {vertical-align: baseline; *vertical-align: middle} /* IE7 and older */
button, input {line-height: normal; *overflow: visible}
button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;	box-sizing: content-box}
input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0}

/*===================================================================================================
    :: FLEXI.CSS.2 - STRUCTURE DU DOCUMENT EN GRILLE (RANGÉES, COLONNES)
===================================================================================================== */
@media screen{
.conteneur {
	max-width:960px; /* Definir la taille totale de toutes les rangees. */
	margin:0 auto; 
	padding:0 16px; /* Ajoute une marge de chaque côté de la page pour les appareils qui ne sont pas mobile afin d'éviter que le contenu (conteneur) se ramasse "collé" sur le côté la page, particulièrement sur les tablettes. Les mobiles ne sont pas affectés */
	overflow:hidden;
} 

.rangee {
	width:100%; 
	display:table; /* display table et word-spacing pour enlever l'espace provoqué avec inline-block*/
	word-spacing:-1em;
	_word-spacing:normal; /* Pas besoin du word-spacing pour IE6 */
	-moz-box-sizing: border-box;  /* Applique le modèle de boite standard à tous les éléments. Désormais, le padding est inclus dans le Width total */
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	*behavior: url('/fileadmin/templates/css/boxsizing.htc'); 
} 	
.rangee > * {word-spacing:normal; } /* pour réinitialiser la taille du texte et l'espacement de tous les éléments dans une rangée */

.un, .deux, .trois, .quatre, .cinq, .six, .sept, .huit, .neuf, .dix, .onze, .douze {
	margin:0;
	display:inline-block; /* Remplace float:left; compatible avec le responsive design */
	vertical-align:top; /* Nécessaire avec le inline-block; p-e pas nécessaire puisque déjà initialisé en début de CSS */
	zoom:1; /* Compatibilité inline-block avec IE6 + IE7 */
	*display:inline; /* Compatibilité inline-block avec IE6 + IE7 */
	-moz-box-sizing: border-box;  /* Applique le modèle de boite standard à tous les éléments. Désormais, le padding est inclus dans le Width total */
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	*behavior: url('/fileadmin/templates/css/boxsizing.htc'); 
} 
}
.vide {visibility:hidden;}



@media only screen and (max-width: 599px) {

	body {
	margin-left:0;
	margin-right:0;
	min-width:280px;
	}
	
	.conteneur{
	padding-left:0;
	padding-right:0;
	}
}

@media \0screen\,screen\9 { /* only screen and (min-IE-version: 6) and (max-IE-version: 8) */
	
/* Superbe Media Query qui n'est compris que par IE6, IE7 et IE8! */

	.conteneur { 
		*width:960px; /* Forcer la taille fixe de la rangée pour IE6 et IE7 qui réagissent mal au responsive design */
		min-width:600px; /* Min-width pour IE8 qui ne suppore pas la version mobile */
		} 
}


/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.1 - Colonnes base 12
----------------------------------------------------------------------------------------------------- */
/* Utiliser par défaut une rangée de base12 si une rangée doit être divisée en deux, trois, quatre, six ou douze colonnes de taille égale */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 12 */
/* Par exemple: douze colonnes de .un, six colonnes de .deux, une colonne de .cinq + une colonne de .sept, etc. */

	.rangee .un			{ width:8.33333%;} /* Permet 12 colonnes de taille égale */
	.rangee .deux  		{ width:16.6666%;} /* Permet 6 colonnes de taille égale */
	.rangee .trois 		{ width:25%;     } /* Permet 4 colonnes de taille égale  */
	.rangee .quatre		{ width:33.3333%;} /* Permet 3 colonnes de taille égale  */
	.rangee .cinq 		{ width:41.6666%;} /* 100 pourcents multiplié par Cinq/Douzième; à utiliser conjointement avec .sept par exemple */
	.rangee .six 		{ width:50%;     } /* Permet 2 colonnes de taille égale */
	.rangee .sept 		{ width:58.3333%;} /* 100 pourcents multiplié par Sept/Douzième; à utiliser conjointement avec .cinq, ou .trois + .deux par exemple */
	.rangee .huit  		{ width:66.6666%;} /* Colonne utilisant les deux/tiers de la rangée, équivalent de deux colonnes de .quatre */
	.rangee .neuf 		{ width:75%;     } /* Colonne occupant les trois/quarts de la rangée, équivalent de trois fois la largeur de .trois */
	.rangee .dix		{ width:83.3333%;} /* Colonne occupant deux fois la largeur de .cinq, ou 100 pourcents moins une colonne .deux */
	.rangee .onze		{ width:91.6666%;} /* 100 pourcents moins une largeur de .un */
	.rangee .douze		{ width:100%;    } /* Occupe toute la rangée de base 12 */
	
/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.2 - Colonnes base 11
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 11 */
/* Par exemple: onze colonnes de .un, une colonne de .quatre + une colonne de .sept, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .onze */

	.base11 .un			{ width:9.0909%; } /* Permet 11 colonnes de taille égale */
	.base11 .deux  		{ width:18.1818%;} /* Permet 5 colonnes de taille égale + 1 colonne de taille .un  */
	.base11 .trois 		{ width:27.2727%;} 
	.base11 .quatre		{ width:36.3636%;} 
	.base11 .cinq 		{ width:45.4545%;} 
	.base11 .six 		{ width:54.5454%;} /* À utiliser conjointement avec .cinq par exemple  */
	.base11 .sept 		{ width:63.6363%;} /* À utiliser conjointement avec .quatre  par exemple */
	.base11 .huit  		{ width:72.7272%;} /* Deux fois la largeur de .quatre; à utiliser conjointement avec .trois par exemple */
	.base11 .neuf 		{ width:81.8181%;} /* Trois fois la largeur de .trois, à combler avec une rangée .deux de base11 */
	.base11 .dix		{ width:90.9090%;} /* Occupe 10/11 de toute la rangée, il reste .un à combler */
	.base11 .onze		{ width:100%;	 } /* Occupe toute la rangée de base 11 */
	
	
/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.3 - Colonnes base 10
----------------------------------------------------------------------------------------------------- */
/* Utiliser principalement une rangée de base10 si une rangée de premier niveau doit être divisée en deux, cinq ou dix colonnes de taille égale */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 10 */
/* Par exemple: dix colonnes de .un, cinq colonnes de .deux, une colonne de .trois + une colonne de .sept, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .dix */

	.base10 .un			{ width:10%;     } /* Permet 10 colonnes de taille égale */
	.base10 .deux  		{ width:20%;     } /* Permet 5 colonnes de taille égale  */
	.base10 .trois 		{ width:30%;     } /* Ne divise pas exactement en trois, il reste 10 pourcents.  */
	.base10 .quatre		{ width:40%;     } /* Occupe deux fois l'espace d'une rangée .deux de base10  */
	.base10 .cinq 		{ width:50%;     } /* Permet 2 colonnes de taille égale */
	.base10 .six 		{ width:60%;     } /* À utiliser conjointement avec .quatre par exemple  */
	.base10 .sept 		{ width:70%;     } /* À utiliser conjointement avec .trois  par exemple */
	.base10 .huit  		{ width:80%;     } /* Deux fois la largeur de .quatre; à utiliser conjointement avec .deux par exemple */
	.base10 .neuf 		{ width:90%;     } /* Trois fois la largeur de .trois, il reste 10% à combler avec une rangée .un de base10 */
	.base10 .dix		{ width:100%;    } /* Occupe toute la rangée de base 10 */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.4 - Colonnes base 9
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 9 */
/* Par exemple: neuf colonnes de .un, trois colonnes de .trois, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .neuf */

	.base9 .un			{ width:11.1111%;} /* Permet 9 colonnes de taille égale */
	.base9 .deux  		{ width:22.2222%;} 
	.base9 .trois 		{ width:33.3333%;} /* Permet 3 colonnes de taille égale */
	.base9 .quatre		{ width:44.4444%;} /* Occupe deux fois l'espace d'une rangée .deux de base9  */
	.base9 .cinq 		{ width:55.5555%;} 
	.base9 .six 		{ width:66.6666%;} /* À utiliser conjointement avec .trois par exemple  */
	.base9 .sept 		{ width:77.7777%;} /* À utiliser conjointement avec .deux  par exemple */
	.base9 .huit  		{ width:88.8888%;} /* Deux fois la largeur de .quatre; à utiliser conjointement avec .un par exemple */
	.base9 .neuf		{ width:100%;    } /* Occupe toute la rangée de base9 */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.5 - Colonnes base 8
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 8 */
/* Par exemple: huit colonnes de .un, quatre colonnes de .deux, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .huit */

	.base8 .un			{ width:12.25%;	} /* Permet 8 colonnes de taille égale */
	.base8 .deux  		{ width:25%;	} /* Permet 4 colonnes de taille égale */
	.base8 .trois 		{ width:37.5%;	} /* Permet 3 colonnes de taille égale */
	.base8 .quatre		{ width:50%;	} /* Occupe la moitié de la colonne  */
	.base8 .cinq 		{ width:62.5%;	} 
	.base8 .six 		{ width:75%;	} /* À utiliser conjointement avec .deux par exemple  */
	.base8 .sept 		{ width:87.5%;	} /* À utiliser conjointement avec .un  par exemple */
	.base8 .huit  		{ width:100%;	} /* Occupe toute la rangée de base8 */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.6 - Colonnes base 7
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 7 */
/* Par exemple: sept colonnes de .un, trois colonnes de .deux + une colonne de .un, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .sept */

	.base7 .un			{ width:14.2857%;	} /* Permet 7 colonnes de taille égale */
	.base7 .deux  		{ width:28.5714%;	} 
	.base7 .trois 		{ width:42.8571%;	} 
	.base7 .quatre		{ width:57.1428%;	}
	.base7 .cinq 		{ width:71.4285%;	} 
	.base7 .six 		{ width:85.7142%;	} /* À utiliser conjointement avec .un par exemple  */
	.base7 .sept 		{ width:100%;		} /* Occupe toute la rangée de base7 */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.7 - Colonnes base 6
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 6 */
/* Par exemple: six colonnes de .un, trois colonnes de .deux, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .six */

	.base6 .un			{ width:16.6666%;} /* Permet 6 colonnes de taille égale */
	.base6 .deux  		{ width:33.3333%;} /* Permet 3 colonnes de taille égale */
	.base6 .trois 		{ width:50%;	 } /* Permet 2 colonnes de taille égale */
	.base6 .quatre		{ width:66.6666%;}
	.base6 .cinq 		{ width:82.3333%;} 
	.base6 .six 		{ width:85.7142%;} /*  Occupe toute la rangée de base6  */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.8 - Colonnes base 5
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 5 */
/* Par exemple: cinq colonnes de .un, deux colonnes de .deux + une colonne de .un, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .cinq */

	.base5 .un			{ width:20%		;} /* Permet 5 colonnes de taille égale */
	.base5 .deux  		{ width:40%		;} 
	.base5 .trois 		{ width:60%		;} 
	.base5 .quatre		{ width:80%		;}
	.base5 .cinq 		{ width:100%	;} 

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.9 - Colonnes base 4
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 4 */
/* Par exemple: quatre colonnes de .un, deux colonnes de .deux, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .quatre */

	.base4 .un			{ width:25%		;} /* Permet 4 colonnes de taille égale */
	.base4 .deux  		{ width:50%		;} 
	.base4 .trois 		{ width:75%		;} 
	.base4 .quatre		{ width:100%	;}

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.10 - Colonnes base 3
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 3 */
/* Par exemple: trois colonnes de .un, une colonnes de .deux + une colonne de .un, etc. */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .trois */

	.base3 .un			{ width:33.3333%;} /* Permet 3 colonnes de taille égale */
	.base3 .deux  		{ width:66.6666%;} 
	.base3 .trois 		{ width:100%	;} 

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.11 - Colonnes base 2
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 2 */
/* Par exemple: deux colonnes de .un, une colonnes de .deux */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .deux */

	.base2 .un			{ width:50%;	} /* Permet 2 colonnes de taille égale */
	.base2 .deux  		{ width:100%;	} 
	
/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.12 - Colonnes base 1
----------------------------------------------------------------------------------------------------- */
/* Toujours s'assurer que le total de colonne d'une rangée équivaut à 1 */
/* Par exemple: une colonne de .un */
/* Utiliser cette base pour les rangées contenues dans des colonnes de largeur .un */

	.base1 .un			{ width:100%;	} /* Permet une colonne de pleine largeur */


/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.2.13 - Colonnes pour mobile
----------------------------------------------------------------------------------------------------- */

/*Effacé par CCW*/


/*====================================================================================================
	:: FLEXI.CSS.3 - PIV HAUT ET BAS
======================================================================================================*/

/*---------------------------------------------------------------------------------------------------- 
	:: FLEXI.CSS.3.1 - PIV HAUT
 -----------------------------------------------------------------------------------------------------*/	
 
 
/***:: FLEXI.CSS.3.1.1 - PIV Haut Écran *********************************************************************/

	.pivHaut {
		padding:0;
		background:none;
		box-shadow:none;
		margin-bottom:15px;
	}


	.pivHaut .banniere {
		display:table;
		/*background-image:url(../images/piv/banniere2.png);*/
		background-position:top right;
		background-repeat:no-repeat;
	}
	
	.pivHautLogo {
		margin:0;
		padding:0;
		background:#FFF;
		display:table-cell;
		behavior: url(/fileadmin/templates/css/display-table.htc);
		height:72px;
		vertical-align:bottom;
	}
	
	.pivHautLogo a {
		position:relative; 
		/*bottom:-17px; /* Réaligne le logo à la même hauteur que le menu de la bande bleue du PIV, ce qui empêche l'overflow de la bannière sous le menu, peu importe la taille de la bannière */ */
	}
	
	.pivHautMenu {
		vertical-align:bottom; 
		display:table-cell; 
		width:100%; 
		height:auto;
		font-size:medium; /* pour fixer la taille du texte à la taille par défaut fourni dans le navigateur (normalement 16px), et ce peu importe la taille du font-size sur l'élément HTML. Permet de zoomer le texte du PIV sans avoir à fixer la taille en pixels ni être influencé par le root HTML */
	} 
	
	.pivHautBoutonMenu, .pivHautBoutonRecherche, .pivHautBoutonsMobile, .recherche .pivHautRecherche {display:none;}

	.pivHautMenu ul {
		background:#003399;
		min-height:15px;
		font-size:70%; /* simule font-size:11px en fonction du font-size:medium du conteneur parent .pivHautMenu. Donc 70% de 16px = 11px; */
	}
	
	.pivHautMenu ul:after {content:"";clear:both;display:block;} /* after nécessaire pour l'accessibilité lors du grossissement du texte, fait que la hauteur de la bande bleue du PIV s'ajuste en fonction du zoom */
	.pivHautMenu li {display:block;float:left;font-weight:normal;border-top:none; }
	.pivHautMenu .pivAlignementDroit {float:right;padding:0 15px 0 0;}
	.pivHautMenu a {display:block;padding:0 0 0 15px;color:#fff;text-decoration:none;}
	.pivHautMenu a:hover, .pivHautMenu a:focus, .pivHautMenu a:active {background:none;text-decoration:underline;}

/***:: FLEXI.CSS.3.1.1.1 - Outils *********************************************************************/	

	.pivHautFonctionnalites {text-align:right;padding:0;margin:0;font-size:12px;margin-top:17px;}
	
	.pivHautRecherche {padding:0; margin:0;background:none;display:inline-block;}
	.pivHautRecherche label {width:1px;height:1px;overflow:hidden; text-indent:-9999px;display:block;float:left; }
	.pivHautRecherche input {width:160px; height:19px; padding:0 0 1px; margin:0; border:1px solid #e2e2e2; font-size:1rem; display:block;float:left;}
	.pivHautRecherche button {display:block;float:left; width:22px; height:22px; padding:0; margin:0; background:url(../images/piv/btn-piv-search-desktop.png) left top no-repeat; border:none; font-size:1rem; border-radius:0; text-indent:-9999px;}
	.pivHautRecherche button:hover, .pivHautRecherche button:active, .pivHautRecherche button:focus {background-position:left bottom;}

	.pivOutils {margin:0;padding:0;display:inline-block;}
	.pivOutils li {padding-left:3px;height:22px;border-left:1px solid #f2f2f2;display:inline-block;}
	.pivOutils button {border:0;text-indent:-9999px;}
	
	/* Taille du texte */
	.pivTailleTexte {width:21px; height:21px; margin:0; background:url(../images/piv/taille.png) left top no-repeat;}
	.pivTailleTexte:hover, .pivTailleTexte:active, .pivTailleTexte:focus {background-position:right top;}
	/* Gérer l'état du bouton TailleTexte quand on a cliqué dessus et que le texte est grand. */
	.grandTexte .pivTailleTexte {background-position:left bottom;}
	.grandTexte .pivTailleTexte:hover, .grandTexte .pivTailleTexte:active, .grandTexte .pivTailleTexte:focus {background-position:right bottom;}
	
	/* Bouton d'impression */
	.pivImprimer {width:22px; height:22px; margin:0; background:url(../images/piv/imprimer.png) left bottom no-repeat;}
	.pivImprimer:hover, .pivImprimer:active, .pivImprimer:focus {background-position:left top;}


	/* Bouton de grille */
	.pivGrille {width:21px; height:21px; margin:0; background:url(../images/piv/grille.png) left top no-repeat;}
	.pivGrille:hover, .pivGrille:active, .pivGrille:focus {background-position:right top;}
	/* Gérer l'état du bouton afficherGrille quand on a cliqué dessus et que la grille est affichée. */
	.afficherGrille .pivGrille {background-position:left bottom;}
	.afficherGrille .pivGrille:hover, .afficherGrille .pivGrille:active, .afficherGrille .pivGrille:focus {background-position:right bottom;}

/***:: FLEXI.CSS.3.1.1.2 - Rétrocompatibilité *********************************************************************/	

@media screen\9 { /* only screen and (min-IE-version: 6) and (max-IE-version: 7) */
	
/* Ajustements pour rétro compatibilité avec IE7/IE6 */

	.pivHautRecherche {
		zoom:1;
		display:inline;
	}
	
	.pivOutils {
		zoom:1;
		display:inline;
	}
		
	.pivOutils li {
		padding-left:0;
		zoom:1;
		display:inline;
		width:28px;
	}

	.pivHaut .banniere {
		behavior: url(/fileadmin/templates/css/display-table.htc); /* fait fonctionner le display table pour IE6 et IE7 */
		margin:0;
	}

	.pivHautLogo { 
		width:auto;
		float:left;
		background:none #FFF;
		-dt-display: table-cell; /* compatibilité display-table pour IE6+IE7 */
	}
	
	.pivHautMenu { 
		width:75%; /* Un width pas à 100% juste pour que ça ne pète pas entre le moment où la page est chargée et le script display-table.htc s'active */
		margin:57px 0 0 0; /* Une marge pour simuler temporairement l'espace nécessaire de la bannière jusqu'à ce que le script display-table.htc embarque, pour éviter que le repositionnement soit trop brusque */
		padding:0; /* Réinitialisation du padding car sinon un padding inutile de 24px se crée avec le script display-table.htc */
		-dt-display: table-cell; /* compatibilité display-table pour IE6+IE7 */
		word-wrap:normal; /* annule l'éclatement des mots sur plusieurs lignes dans le PIV si les mots sont trop longs. Nécessaire pour IE6+IE7 */
	}
	
	.banniere .nav-last { /* Cette classe apparait avec le display-table.htc et permet de gérer le width correctement */
		width:100%;	
		margin:0;
	}
	
	.pivHautMenu ul {
		_height:15px; /* Parce que IE6 ne comprend pas la propriété min-height et que height réagit comme min-height sur ce navigateur */
	}


}
 
 
/***:: FLEXI.CSS.3.1.2 - PIV Haut mobile *********************************************************************/

/*Effacé par CCW*/

/*---------------------------------------------------------------------------------------------------- 
        :: FLEXI.CSS.3.2 - PIV Bas
 -----------------------------------------------------------------------------------------------------*/        
.pivBas {
	text-align:center;
	margin:10px 0;
	font-size:medium; /* font-size medium pour fixer la taille du texte à la taille par défaut fourni dans le navigateur (normalement 16px), et ce peu importe la taille du font-size sur l'élément HTML. Permet de zoomer le texte du PIV sans avoir à fixer la taille en pixels ni être influencé par le root HTML */
}
.pivBas p {
	margin:0;
	font-size:70%; /* simule font-size:11px en fonction du font-size:medium du conteneur parent .pivHautMenu. Donc 70% de 16px = 11px; */
}
.pivBas ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
	font-size:70%; /* simule font-size:11px en fonction du font-size:medium du conteneur parent .pivHautMenu. Donc 70% de 16px = 11px; */
}
.pivBas ul li {margin:0;padding:0;display:inline;}
.pivBas a:link {color:#003399;font-weight:normal;margin-right:8px;margin-left:8px;}
.pivBas a:visited {color:#9900FF;font-weight:normal;}
.pivBas a:hover {color:#003399;text-decoration:underline;}
.pivBas a:active {color:#003399;}

.pivBas .pivBasLogo img {border:none; width:96px; height:26px;}
.hors-champ {display:inline-block; width:1px; text-indent:-9999px;}

@media only screen and (max-width: 599px) {
	.pivBas p, .pivBas ul {font-size:larger;}
}

/*===================================================================================================
    :: FLEXI.CSS.4 - TYPOGRAPHIE
===================================================================================================== */
/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.1 - Typographie titres
----------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {color: #57524a;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 {font-size: 2rem; margin-bottom: 1rem;} /* Deux fois la taille du paragraphe, environ 32px */
h2 {font-size: 1.8rem; margin-bottom: 0.6rem;} /* Taille approximative de 29px */
h3 {font-size: 1.6rem; margin-bottom: 0.6rem;} /* Taille approximative de 26px */
h4 {font-size: 1.4rem; margin-bottom: 0.3rem;} /* Taille approximative de 22px */
h5 {font-size: 1.2rem; margin-bottom: 0.3rem;} /* Taille approximative de 19px */
h6 {font-size: 1.1rem; margin-bottom: 0.3rem;} /* Taille approximative de 18px */


/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.2 - Typographie paragraphes
----------------------------------------------------------------------------------------------------- */
p { margin: 0 0 1rem; } /* Taille de base des paragraphes dans le navigateur est automatiquement de 1rem, normalement 16px. Inutile de réinitialiser cette valeur. Pour modifier la taille par défaut des paragraphes, modifier le % du font-size dans la balise HTML dans la section FLEXI.CSS.1 */

strong, b, dt { font-weight: bold}
dfn {font-style: italic; padding-right:20px; border-left:3px solid black; color:#504d47;}
var, address {font-style: normal}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline} /* Position 'sub' and 'sup' without affecting line-height */
sup {top: -0.5rem} /* Move superscripted text up */
sub {bottom: -0.25rem} /* Move subscripted text down */

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.3 - Typographie citations
----------------------------------------------------------------------------------------------------- */

blockquote {
	margin: 0 0 18px;
	padding: 9px 20px 0 19px;
	border-left: 1px solid #ddd;
	display: block;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 20px;
	color: #777;
}

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.4 - Typographie séparateurs
----------------------------------------------------------------------------------------------------- */
hr {
	border: solid #ddd;
	border-width: 1px 0 0;
	clear: both;
	margin: 12px 0 18px;
	height: 0;
}

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.5 - Typographie abréviations-acronymes
----------------------------------------------------------------------------------------------------- */
abbr, acronym {
	text-transform: uppercase;
	font-size: 90%;
	color: #222;
	border-bottom: 1px solid #ddd;
	cursor: help;
	text-transform: none;
}

/*---------------------------------------------------------------------------------------------------
    :: FLEXI.CSS.4.6 - Typographie liens
----------------------------------------------------------------------------------------------------- */

a:focus {outline:dotted 1px;} /* Ajoute un outline encadré pour l'accessibilité lors de la navigation avec le clavier */
a:active {outline:none;} /* Supprimer l'encadré outline pour la navigation avec la souris mais pas pour la navigation par clavier */
.rangee a:link {color:#00F;font-weight:bold;text-decoration:underline;}
.rangee a:visited {color:#03F;font-weight:bold;text-decoration:underline;}
.rangee a:hover {color:#06F;text-decoration:none;}
.rangee a:active {color:#009;}


/* ---------------------------------------------------------------------------------------------------- 
    :: FLEXI.CSS.4.7 - Alignements et styles divers 
-----------------------------------------------------------------------------------------------------*/

.alignementGauche {
	text-align: left;
}
.alignementDroit {
	text-align: right;
}
.alignementCentre {
	text-align: center;
}

.surlignage {
	background: #ff0;
}


/*===================================================================================================
    :: FLEXI.CSS.5 - STYLES POUR LES OUTILS DU PIV
===================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- 
    :: FLEXI.CSS.5.1 - Texte agrandi via l'outil AgrandirTaille du PIV 
-----------------------------------------------------------------------------------------------------*/

/* Toutes les classes nécessaires lorsqu'on agrandit le texte via le bouton du PIV .grandTexte */

.grandTexte {font-size:115%;} /* Tout le texte est redimensionné à 115 pourcents de sa taille normale sur l'élément HTML en respect avec les REMS basés sur le Root HTML */

/* Ajustements supplémentaires pour le PIV */
.grandTexte .pivBas p, .grandTexte .pivBas ul { /* pivBas avec grandTexte*/
	font-size:medium; /* équivalent de font-size:16px, mais zoomable car pas une valeur absolue comme en pixels et écrase la valeur du font-size sur le HTML */
	line-height:140%;
} 
	
.grandTexte .pivHaut .pivHautMenu ul {
	font-size:medium;  /* équivalent de font-size:16px, mais zoomable car pas une valeur absolue comme en pixels et écrase la valeur du font-size sur le HTML */
}

@media \0screen\,screen\9 {
/* Superbe Media Query qui n'est compris que par IE6, IE7 et IE8! */
/* IE8 et moins ne lit pas les REM qui sont automatiquement convertis en pixels par défaut et ne peut donc les multiplier par 115%, il faut donc initialiser leur taille dès le début */
/* Pas besoin de fixer la taille de la balise P!!!   En fonction de grandTexte=115%,  les rems sont avec IE6, IE7 et IE8. On pourrait eventuellement toutc alculer les rems en les multipliant par 115% et puis laisser tomber la redimension du texte sur l'élément root HTML, car de toute façon, pour rester compatible avec IE, on n'a pas le choix de calculer la taille des rems en format grandTexte. */
.grandTexte .rangee p    {} 				  
.grandTexte .rangee h1   {font-size:2.3rem;}
.grandTexte .rangee h2   {font-size:2.07rem;} 
.grandTexte .rangee h3   {font-size:1.84rem;} 
.grandTexte .rangee h4   {font-size:1.61rem;}
.grandTexte .rangee h5   {font-size:1.38rem;} 
.grandTexte .rangee h6   {font-size:1.27rem;}
.grandTexte .rangee ul li{font-size:1.15rem;}
.grandTexte .rangee ol li{font-size:1.15rem;} 
}

/* ---------------------------------------------------------------------------------------------------- 
    :: FLEXI.CSS.5.2 - Grille affichée via l'outil afficherGrille du PIV 
-----------------------------------------------------------------------------------------------------*/

.afficherGrille .rangee					{background-color:#BBB;color:black;position:relative;}
.afficherGrille .rangee:nth-child(even)	{background-color:#888;color:black;}
.afficherGrille .rangee:before			{content:"Base12";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:white;}
.afficherGrille .base11:before			{content:"Base11";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#FF0;}
.afficherGrille .base10:before			{content:"Base10";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#FC0;}
.afficherGrille .base9:before			{content:"Base9";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#F90;}
.afficherGrille .base8:before			{content:"Base8";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#CF0;}
.afficherGrille .base7:before			{content:"Base7";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#CC0;}
.afficherGrille .base6:before			{content:"Base6";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#9F0;}
.afficherGrille .base5:before			{content:"Base5";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#0F0;}
.afficherGrille .base4:before			{content:"Base4";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#3FF;}
.afficherGrille .base3:before			{content:"Base3";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#F9F;}
.afficherGrille .base2:before			{content:"Base2";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#9CC;}
.afficherGrille .base1:before			{content:"Base1";z-index:1000;border:3px solid blue;display:inline-block; background-color:blue;position:absolute;left:0;font-weight:bold;font-size:12px;color:#0FC;}

.afficherGrille .rangee .rangee > *:before {min-width:25px;text-align:center;}

.afficherGrille .un						{outline:1px solid #00F; outline-offset:-1px; background-color:#E3F1FD; position:relative;}
.afficherGrille .un:nth-child(even)		{outline:1px solid #FF8000; outline-offset:-1px; background-color:#FED;}
.afficherGrille .un:before				{content:"1/12";border:3px solid black;background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .un:before		{content:"1/11";color:#FF0;}
.afficherGrille .base10 .un:before		{content:"1/10";color:#FC0;}
.afficherGrille .base9 .un:before		{content:"1/9";color:#F90;}
.afficherGrille .base8 .un:before		{content:"1/8";color:#CF0;}
.afficherGrille .base7 .un:before		{content:"1/7";color:#CC0;}
.afficherGrille .base6 .un:before		{content:"1/6";color:#9F0;}
.afficherGrille .base5 .un:before		{content:"1/5";color:#0F0;}
.afficherGrille .base4 .un:before		{content:"1/4";color:#3FF;}
.afficherGrille .base3 .un:before		{content:"1/3";color:#F9F;}
.afficherGrille .base2 .un:before		{content:"1/2";color:#9CC;}
.afficherGrille .base1 .un:before		{content:"1/1";color:#0FC;}

.afficherGrille .deux					{outline:1px solid #412C84; outline-offset:-1px; background-color:#F8EDFE; position:relative;}
.afficherGrille .deux:nth-child(even)	{outline:1px solid #A68900; outline-offset:-1px; background-color:#FEFAE2;}
.afficherGrille .deux:before			{content:"2/12";border:3px solid black;background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .deux:before	{content:"2/11";color:#FF0;}
.afficherGrille .base10 .deux:before	{content:"2/10";color:#FC0;}
.afficherGrille .base9 .deux:before		{content:"2/9";color:#F90;}
.afficherGrille .base8 .deux:before		{content:"2/8";color:#CF0;}
.afficherGrille .base7 .deux:before		{content:"2/7";color:#CC0;}
.afficherGrille .base6 .deux:before		{content:"2/6";color:#9F0;}
.afficherGrille .base5 .deux:before		{content:"2/5";color:#0F0;}
.afficherGrille .base4 .deux:before		{content:"2/4";color:#3FF;}
.afficherGrille .base3 .deux:before		{content:"2/3";color:#F9F;}
.afficherGrille .base2 .deux:before		{content:"2/2";color:#9CC;}

.afficherGrille .trois					{outline:1px solid #80A636; outline-offset:-1px; background-color:#EFFFD0; position:relative;}
.afficherGrille .trois:nth-child(even)	{outline:1px solid #A63675; outline-offset:-1px; background-color:#FFE3F3;}
.afficherGrille .trois:before			{content:"3/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .trois:before	{content:"3/11";color:#FF0;}
.afficherGrille .base10 .trois:before	{content:"3/10";color:#FC0;}
.afficherGrille .base9 .trois:before	{content:"3/9";color:#F90;}
.afficherGrille .base8 .trois:before	{content:"3/8";color:#CF0;}
.afficherGrille .base7 .trois:before	{content:"3/7";color:#CC0;}
.afficherGrille .base6 .trois:before	{content:"3/6";color:#9F0;}
.afficherGrille .base5 .trois:before	{content:"3/5";color:#0F0;}
.afficherGrille .base4 .trois:before	{content:"3/4";color:#3FF;}
.afficherGrille .base3 .trois:before	{content:"3/3";color:#F9F;}

.afficherGrille .quatre					{outline:1px solid #4D4D00; outline-offset:-1px; background-color:#FFFFC1; position:relative;}
.afficherGrille .quatre:nth-child(even)	{outline:1px solid #A809FF; outline-offset:-1px; background-color:#EAC4FF;}
.afficherGrille .quatre:before			{content:"4/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .quatre:before	{content:"4/11";color:#FF0;}
.afficherGrille .base10 .quatre:before	{content:"4/10";color:#FC0;}
.afficherGrille .base9 .quatre:before	{content:"4/9";color:#F90;}
.afficherGrille .base8 .quatre:before	{content:"4/8";color:#CF0;}
.afficherGrille .base7 .quatre:before	{content:"4/7";color:#CC0;}
.afficherGrille .base6 .quatre:before	{content:"4/6";color:#9F0;}
.afficherGrille .base5 .quatre:before	{content:"4/5";color:#0F0;}
.afficherGrille .base4 .quatre:before	{content:"4/4";color:#3FF;}

.afficherGrille .cinq					{outline:1px solid #FBA0A7; outline-offset:-1px; background-color:#FFE3E5; position:relative;}
.afficherGrille .cinq:nth-child(even)	{outline:1px solid #ACFBA0; outline-offset:-1px; background-color:#E6FFE3;}
.afficherGrille .cinq:before			{content:"5/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .cinq:before	{content:"5/11";color:#FF0;}
.afficherGrille .base10 .cinq:before	{content:"5/10";color:#FC0;}
.afficherGrille .base9 .cinq:before		{content:"5/9";color:#F90;}
.afficherGrille .base8 .cinq:before		{content:"5/8";color:#CF0;}
.afficherGrille .base7 .cinq:before		{content:"5/7";color:#CC0;}
.afficherGrille .base6 .cinq:before		{content:"5/6";color:#9F0;}
.afficherGrille .base5 .cinq:before		{content:"5/5";color:#0F0;}

.afficherGrille .six					{outline:1px solid #DF7000; outline-offset:-1px; background-color:#FFF5E2; position:relative;}
.afficherGrille .six:nth-child(even)	{outline:1px solid #445988; outline-offset:-1px; background-color:#E4ECFF;}
.afficherGrille .six:before				{content:"6/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .six:before		{content:"6/11";color:#FF0;}
.afficherGrille .base10 .six:before		{content:"6/10";color:#FC0;}
.afficherGrille .base9 .six:before		{content:"6/9";color:#F90;}
.afficherGrille .base8 .six:before		{content:"6/8";color:#CF0;}
.afficherGrille .base7 .six:before		{content:"6/7";color:#CC0;}
.afficherGrille .base6 .six:before		{content:"6/6";color:#9F0;}

.afficherGrille .sept					{outline:1px solid #EE00A0; outline-offset:-1px; background-color:#FFE6F7; position:relative;}
.afficherGrille .sept:before			{content:"7/12";border:3px solid black;background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .sept:before	{content:"7/11";color:#FF0;}
.afficherGrille .base10 .sept:before	{content:"7/10";color:#FC0;}
.afficherGrille .base9 .sept:before		{content:"7/9";color:#F90;}
.afficherGrille .base8 .sept:before		{content:"7/8";color:#CF0;}
.afficherGrille .base7 .sept:before		{content:"7/7";color:#CC0;}

.afficherGrille .huit					{outline:1px solid #879DFF; outline-offset:-1px; background-color:#E7EBFF; position:relative;}
.afficherGrille .huit:before			{content:"8/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .huit:before	{content:"8/11";color:#FF0;}
.afficherGrille .base10 .huit:before	{content:"8/10";color:#FC0;}
.afficherGrille .base9 .huit:before		{content:"8/9";color:#F90;}
.afficherGrille .base8 .huit:before		{content:"8/8";color:#CF0;}

.afficherGrille .neuf					{outline:1px solid #007F08; outline-offset:-1px; background-color:#DEFDE0; position:relative;}
.afficherGrille .neuf:before			{content:"9/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .neuf:before	{content:"9/11";color:#FF0;}
.afficherGrille .base10 .neuf:before	{content:"9/10";color:#FC0;}
.afficherGrille .base9 .neuf:before		{content:"9/9";color:#F90;}


.afficherGrille .dix					{outline:1px solid #B40500; outline-offset:-1px; background-color:#FDE0DF; position:relative;} 
.afficherGrille .dix:before				{content:"10/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .dix:before		{content:"10/11";color:#FF0;}
.afficherGrille .base10 .dix:before		{content:"10/10";color:#FC0;}

.afficherGrille .onze					{outline:1px solid #3F0062; outline-offset:-1px; background-color:#F1DEFC; position:relative;}
.afficherGrille .onze:before			{content:"11/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}
.afficherGrille .base11 .onze:before	{content:"11/11";color:#FF0;}

.afficherGrille .douze					{outline:1px solid #5B8900; outline-offset:-1px; background-color:#F3FDDF; position:relative;}
.afficherGrille .douze:before			{content:"12/12";border:3px solid black; background-color:black;position:absolute;right:0;font-weight:bold;font-size:12px;color:white;z-index:1500;}

.afficherGrille .rangee .vide			{visibility:visible;position:relative;background-color:#333;}
.afficherGrille .rangee .vide:before	{color:red;}


/*===================================================================================================
    :: FLEXI.CSS.6 - STYLES POUR IMPRESSION
===================================================================================================== */

.print-only {
	display: none !important;
}

@media print{
	* {
		background: transparent !important;
		color: black !important;
		text-shadow: none !important;
		filter:none !important;
		-ms-filter: none !important;
		overflow:visible; /* évite que le texte et les images se retrouvent coupés à la fin d'une page et au début de la page suivante */
	} 
	p a, p a:visited {
		color: #444 !important;
		text-decoration: underline;
	}
	
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	img {
		page-break-inside: avoid;
	}
	
	@page {
	margin: 0.5cm;
	}
	
	.retrait-impression {
		display: none !important;
	}
	.impression-seulement {
		display: block !important;
	}
	
	.pivHautMenu, .pivHautFonctionnalites, .pivBasLiens {
	display:none;	
	}
}

/*===================================================================================================
    :: FLEXI.CSS.7 - STYLES POUR MOBILE
===================================================================================================== */

/*Effacé par CCW*/